Update extensions to Ext JS 3.4.0

This commit is contained in:
Calum Lind 2012-02-18 17:54:51 +00:00
commit 966fc6f64f
12 changed files with 1330 additions and 1226 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
/** /**
* @class Ext.ux.Spinner * @class Ext.ux.Spinner
@ -10,428 +10,433 @@
* Creates a Spinner control utilized by Ext.ux.form.SpinnerField * Creates a Spinner control utilized by Ext.ux.form.SpinnerField
*/ */
Ext.ux.Spinner = Ext.extend(Ext.util.Observable, { Ext.ux.Spinner = Ext.extend(Ext.util.Observable, {
incrementValue: 1, incrementValue: 1,
alternateIncrementValue: 5, alternateIncrementValue: 5,
triggerClass: 'x-form-spinner-trigger', triggerClass: 'x-form-spinner-trigger',
splitterClass: 'x-form-spinner-splitter', splitterClass: 'x-form-spinner-splitter',
alternateKey: Ext.EventObject.shiftKey, alternateKey: Ext.EventObject.shiftKey,
defaultValue: 0, defaultValue: 0,
accelerate: false, accelerate: false,
constructor: function(config){ constructor: function(config){
Ext.ux.Spinner.superclass.constructor.call(this, config); Ext.ux.Spinner.superclass.constructor.call(this, config);
Ext.apply(this, config); Ext.apply(this, config);
this.mimicing = false; this.mimicing = false;
}, },
init: function(field){ init: function(field){
this.field = field; this.field = field;
field.afterMethod('onRender', this.doRender, this); field.afterMethod('onRender', this.doRender, this);
field.afterMethod('onEnable', this.doEnable, this); field.afterMethod('onEnable', this.doEnable, this);
field.afterMethod('onDisable', this.doDisable, this); field.afterMethod('onDisable', this.doDisable, this);
field.afterMethod('afterRender', this.doAfterRender, this); field.afterMethod('afterRender', this.doAfterRender, this);
field.afterMethod('onResize', this.doResize, this); field.afterMethod('onResize', this.doResize, this);
field.afterMethod('onFocus', this.doFocus, this); field.afterMethod('onFocus', this.doFocus, this);
field.beforeMethod('onDestroy', this.doDestroy, this); field.beforeMethod('onDestroy', this.doDestroy, this);
}, },
doRender: function(ct, position){ doRender: function(ct, position){
var el = this.el = this.field.getEl(); var el = this.el = this.field.getEl();
var f = this.field; var f = this.field;
if (!f.wrap) { if (!f.wrap) {
f.wrap = this.wrap = el.wrap({ f.wrap = this.wrap = el.wrap({
cls: "x-form-field-wrap" cls: "x-form-field-wrap"
}); });
} }
else { else {
this.wrap = f.wrap.addClass('x-form-field-wrap'); this.wrap = f.wrap.addClass('x-form-field-wrap');
} }
this.trigger = this.wrap.createChild({ this.trigger = this.wrap.createChild({
tag: "img", tag: "img",
src: Ext.BLANK_IMAGE_URL, src: Ext.BLANK_IMAGE_URL,
cls: "x-form-trigger " + this.triggerClass cls: "x-form-trigger " + this.triggerClass
}); });
if (!f.width) { if (!f.width) {
this.wrap.setWidth(el.getWidth() + this.trigger.getWidth()); this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
} }
this.splitter = this.wrap.createChild({ this.splitter = this.wrap.createChild({
tag: 'div', tag: 'div',
cls: this.splitterClass, cls: this.splitterClass,
style: 'width:13px; height:2px;' style: 'width:13px; height:2px;'
}); });
this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show(); this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();
this.proxy = this.trigger.createProxy('', this.splitter, true); this.proxy = this.trigger.createProxy('', this.splitter, true);
this.proxy.addClass("x-form-spinner-proxy"); this.proxy.addClass("x-form-spinner-proxy");
this.proxy.setStyle('left', '0px'); this.proxy.setStyle('left', '0px');
this.proxy.setSize(14, 1); this.proxy.setSize(14, 1);
this.proxy.hide(); this.proxy.hide();
this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", { this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
dragElId: this.proxy.id dragElId: this.proxy.id
}); });
this.initTrigger(); this.initTrigger();
this.initSpinner(); this.initSpinner();
}, },
doAfterRender: function(){ doAfterRender: function(){
var y; var y;
if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) { if (Ext.isIE && this.el.getY() != (y = this.trigger.getY())) {
this.el.position(); this.el.position();
this.el.setY(y); this.el.setY(y);
} }
}, },
doEnable: function(){ doEnable: function(){
if (this.wrap) { if (this.wrap) {
this.wrap.removeClass(this.field.disabledClass); this.disabled = false;
} this.wrap.removeClass(this.field.disabledClass);
}, }
},
doDisable: function(){ doDisable: function(){
if (this.wrap) { if (this.wrap) {
this.wrap.addClass(this.field.disabledClass); this.disabled = true;
this.el.removeClass(this.field.disabledClass); this.wrap.addClass(this.field.disabledClass);
} this.el.removeClass(this.field.disabledClass);
}, }
},
doResize: function(w, h){ doResize: function(w, h){
if (typeof w == 'number') { if (typeof w == 'number') {
this.el.setWidth(w - this.trigger.getWidth()); this.el.setWidth(w - this.trigger.getWidth());
} }
this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth()); this.wrap.setWidth(this.el.getWidth() + this.trigger.getWidth());
}, },
doFocus: function(){ doFocus: function(){
if (!this.mimicing) { if (!this.mimicing) {
this.wrap.addClass('x-trigger-wrap-focus'); this.wrap.addClass('x-trigger-wrap-focus');
this.mimicing = true; this.mimicing = true;
Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, { Ext.get(Ext.isIE ? document.body : document).on("mousedown", this.mimicBlur, this, {
delay: 10 delay: 10
}); });
this.el.on('keydown', this.checkTab, this); this.el.on('keydown', this.checkTab, this);
} }
}, },
// private // private
checkTab: function(e){ checkTab: function(e){
if (e.getKey() == e.TAB) { if (e.getKey() == e.TAB) {
this.triggerBlur(); this.triggerBlur();
} }
}, },
// private // private
mimicBlur: function(e){ mimicBlur: function(e){
if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) { if (!this.wrap.contains(e.target) && this.field.validateBlur(e)) {
this.triggerBlur(); this.triggerBlur();
} }
}, },
// private // private
triggerBlur: function(){ triggerBlur: function(){
this.mimicing = false; this.mimicing = false;
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this); Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
this.el.un("keydown", this.checkTab, this); this.el.un("keydown", this.checkTab, this);
this.field.beforeBlur(); this.field.beforeBlur();
this.wrap.removeClass('x-trigger-wrap-focus'); this.wrap.removeClass('x-trigger-wrap-focus');
this.field.onBlur.call(this.field); this.field.onBlur.call(this.field);
}, },
initTrigger: function(){ initTrigger: function(){
this.trigger.addClassOnOver('x-form-trigger-over'); this.trigger.addClassOnOver('x-form-trigger-over');
this.trigger.addClassOnClick('x-form-trigger-click'); this.trigger.addClassOnClick('x-form-trigger-click');
}, },
initSpinner: function(){ initSpinner: function(){
this.field.addEvents({ this.field.addEvents({
'spin': true, 'spin': true,
'spinup': true, 'spinup': true,
'spindown': true 'spindown': true
}); });
this.keyNav = new Ext.KeyNav(this.el, { this.keyNav = new Ext.KeyNav(this.el, {
"up": function(e){ "up": function(e){
e.preventDefault(); e.preventDefault();
this.onSpinUp(); this.onSpinUp();
}, },
"down": function(e){ "down": function(e){
e.preventDefault(); e.preventDefault();
this.onSpinDown(); this.onSpinDown();
}, },
"pageUp": function(e){ "pageUp": function(e){
e.preventDefault(); e.preventDefault();
this.onSpinUpAlternate(); this.onSpinUpAlternate();
}, },
"pageDown": function(e){ "pageDown": function(e){
e.preventDefault(); e.preventDefault();
this.onSpinDownAlternate(); this.onSpinDownAlternate();
}, },
scope: this scope: this
}); });
this.repeater = new Ext.util.ClickRepeater(this.trigger, { this.repeater = new Ext.util.ClickRepeater(this.trigger, {
accelerate: this.accelerate accelerate: this.accelerate
}); });
this.field.mon(this.repeater, "click", this.onTriggerClick, this, { this.field.mon(this.repeater, "click", this.onTriggerClick, this, {
preventDefault: true preventDefault: true
}); });
this.field.mon(this.trigger, { this.field.mon(this.trigger, {
mouseover: this.onMouseOver, mouseover: this.onMouseOver,
mouseout: this.onMouseOut, mouseout: this.onMouseOut,
mousemove: this.onMouseMove, mousemove: this.onMouseMove,
mousedown: this.onMouseDown, mousedown: this.onMouseDown,
mouseup: this.onMouseUp, mouseup: this.onMouseUp,
scope: this, scope: this,
preventDefault: true preventDefault: true
}); });
this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this); this.field.mon(this.wrap, "mousewheel", this.handleMouseWheel, this);
this.dd.setXConstraint(0, 0, 10) this.dd.setXConstraint(0, 0, 10)
this.dd.setYConstraint(1500, 1500, 10); this.dd.setYConstraint(1500, 1500, 10);
this.dd.endDrag = this.endDrag.createDelegate(this); this.dd.endDrag = this.endDrag.createDelegate(this);
this.dd.startDrag = this.startDrag.createDelegate(this); this.dd.startDrag = this.startDrag.createDelegate(this);
this.dd.onDrag = this.onDrag.createDelegate(this); this.dd.onDrag = this.onDrag.createDelegate(this);
}, },
onMouseOver: function(){ onMouseOver: function(){
if (this.disabled) { if (this.disabled) {
return; return;
} }
var middle = this.getMiddle(); var middle = this.getMiddle();
this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown'; this.tmpHoverClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-overup' : 'x-form-spinner-overdown';
this.trigger.addClass(this.tmpHoverClass); this.trigger.addClass(this.tmpHoverClass);
}, },
//private //private
onMouseOut: function(){ onMouseOut: function(){
this.trigger.removeClass(this.tmpHoverClass); this.trigger.removeClass(this.tmpHoverClass);
}, },
//private //private
onMouseMove: function(){ onMouseMove: function(){
if (this.disabled) { if (this.disabled) {
return; return;
} }
var middle = this.getMiddle(); var middle = this.getMiddle();
if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") || if (((Ext.EventObject.getPageY() > middle) && this.tmpHoverClass == "x-form-spinner-overup") ||
((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) { ((Ext.EventObject.getPageY() < middle) && this.tmpHoverClass == "x-form-spinner-overdown")) {
} }
}, },
//private //private
onMouseDown: function(){ onMouseDown: function(){
if (this.disabled) { if (this.disabled) {
return; return;
} }
var middle = this.getMiddle(); var middle = this.getMiddle();
this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown'; this.tmpClickClass = (Ext.EventObject.getPageY() < middle) ? 'x-form-spinner-clickup' : 'x-form-spinner-clickdown';
this.trigger.addClass(this.tmpClickClass); this.trigger.addClass(this.tmpClickClass);
}, },
//private //private
onMouseUp: function(){ onMouseUp: function(){
this.trigger.removeClass(this.tmpClickClass); this.trigger.removeClass(this.tmpClickClass);
}, },
//private //private
onTriggerClick: function(){ onTriggerClick: function(){
if (this.disabled || this.el.dom.readOnly) { if (this.disabled || this.el.dom.readOnly) {
return; return;
} }
var middle = this.getMiddle(); var middle = this.getMiddle();
var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down'; var ud = (Ext.EventObject.getPageY() < middle) ? 'Up' : 'Down';
this['onSpin' + ud](); this['onSpin' + ud]();
}, },
//private //private
getMiddle: function(){ getMiddle: function(){
var t = this.trigger.getTop(); var t = this.trigger.getTop();
var h = this.trigger.getHeight(); var h = this.trigger.getHeight();
var middle = t + (h / 2); var middle = t + (h / 2);
return middle; return middle;
}, },
//private //private
//checks if control is allowed to spin //checks if control is allowed to spin
isSpinnable: function(){ isSpinnable: function(){
if (this.disabled || this.el.dom.readOnly) { if (this.disabled || this.el.dom.readOnly) {
Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly Ext.EventObject.preventDefault(); //prevent scrolling when disabled/readonly
return false; return false;
} }
return true; return true;
}, },
handleMouseWheel: function(e){ handleMouseWheel: function(e){
//disable scrolling when not focused //disable scrolling when not focused
if (this.wrap.hasClass('x-trigger-wrap-focus') == false) { if (this.wrap.hasClass('x-trigger-wrap-focus') == false) {
return; return;
} }
var delta = e.getWheelDelta(); var delta = e.getWheelDelta();
if (delta > 0) { if (delta > 0) {
this.onSpinUp(); this.onSpinUp();
e.stopEvent(); e.stopEvent();
} }
else else
if (delta < 0) { if (delta < 0) {
this.onSpinDown(); this.onSpinDown();
e.stopEvent(); e.stopEvent();
} }
}, },
//private //private
startDrag: function(){ startDrag: function(){
this.proxy.show(); this.proxy.show();
this._previousY = Ext.fly(this.dd.getDragEl()).getTop(); this._previousY = Ext.fly(this.dd.getDragEl()).getTop();
}, },
//private //private
endDrag: function(){ endDrag: function(){
this.proxy.hide(); this.proxy.hide();
}, },
//private //private
onDrag: function(){ onDrag: function(){
if (this.disabled) { if (this.disabled) {
return; return;
} }
var y = Ext.fly(this.dd.getDragEl()).getTop(); var y = Ext.fly(this.dd.getDragEl()).getTop();
var ud = ''; var ud = '';
if (this._previousY > y) { if (this._previousY > y) {
ud = 'Up'; ud = 'Up';
} //up } //up
if (this._previousY < y) { if (this._previousY < y) {
ud = 'Down'; ud = 'Down';
} //down } //down
if (ud != '') { if (ud != '') {
this['onSpin' + ud](); this['onSpin' + ud]();
} }
this._previousY = y; this._previousY = y;
}, },
//private //private
onSpinUp: function(){ onSpinUp: function(){
if (this.isSpinnable() == false) { if (this.isSpinnable() == false) {
return; return;
} }
if (Ext.EventObject.shiftKey == true) { if (Ext.EventObject.shiftKey == true) {
this.onSpinUpAlternate(); this.onSpinUpAlternate();
return; return;
} }
else { else {
this.spin(false, false); this.spin(false, false);
} }
this.field.fireEvent("spin", this); this.field.fireEvent("spin", this);
this.field.fireEvent("spinup", this); this.field.fireEvent("spinup", this);
}, },
//private //private
onSpinDown: function(){ onSpinDown: function(){
if (this.isSpinnable() == false) { if (this.isSpinnable() == false) {
return; return;
} }
if (Ext.EventObject.shiftKey == true) { if (Ext.EventObject.shiftKey == true) {
this.onSpinDownAlternate(); this.onSpinDownAlternate();
return; return;
} }
else { else {
this.spin(true, false); this.spin(true, false);
} }
this.field.fireEvent("spin", this); this.field.fireEvent("spin", this);
this.field.fireEvent("spindown", this); this.field.fireEvent("spindown", this);
}, },
//private //private
onSpinUpAlternate: function(){ onSpinUpAlternate: function(){
if (this.isSpinnable() == false) { if (this.isSpinnable() == false) {
return; return;
} }
this.spin(false, true); this.spin(false, true);
this.field.fireEvent("spin", this); this.field.fireEvent("spin", this);
this.field.fireEvent("spinup", this); this.field.fireEvent("spinup", this);
}, },
//private //private
onSpinDownAlternate: function(){ onSpinDownAlternate: function(){
if (this.isSpinnable() == false) { if (this.isSpinnable() == false) {
return; return;
} }
this.spin(true, true); this.spin(true, true);
this.field.fireEvent("spin", this); this.field.fireEvent("spin", this);
this.field.fireEvent("spindown", this); this.field.fireEvent("spindown", this);
}, },
spin: function(down, alternate){ spin: function(down, alternate){
var v = parseFloat(this.field.getValue()); var v = parseFloat(this.field.getValue());
var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue; var incr = (alternate == true) ? this.alternateIncrementValue : this.incrementValue;
(down == true) ? v -= incr : v += incr; (down == true) ? v -= incr : v += incr;
v = (isNaN(v)) ? this.defaultValue : v; v = (isNaN(v)) ? this.defaultValue : v;
v = this.fixBoundries(v); v = this.fixBoundries(v);
this.field.setRawValue(v); this.field.setRawValue(v);
}, },
fixBoundries: function(value){ fixBoundries: function(value){
var v = value; var v = value;
if (this.field.minValue != undefined && v < this.field.minValue) { if (this.field.minValue != undefined && v < this.field.minValue) {
v = this.field.minValue; v = this.field.minValue;
} }
if (this.field.maxValue != undefined && v > this.field.maxValue) { if (this.field.maxValue != undefined && v > this.field.maxValue) {
v = this.field.maxValue; v = this.field.maxValue;
} }
return this.fixPrecision(v); return this.fixPrecision(v);
}, },
// private // private
fixPrecision: function(value){ fixPrecision: function(value){
var nan = isNaN(value); var nan = isNaN(value);
if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) { if (!this.field.allowDecimals || this.field.decimalPrecision == -1 || nan || !value) {
return nan ? '' : value; return nan ? '' : value;
} }
return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision)); return parseFloat(parseFloat(value).toFixed(this.field.decimalPrecision));
}, },
doDestroy: function(){ doDestroy: function(){
if (this.trigger) { if (this.trigger) {
this.trigger.remove(); this.trigger.remove();
} }
if (this.wrap) { if (this.wrap) {
this.wrap.remove(); this.wrap.remove();
delete this.field.wrap; delete this.field.wrap;
} }
if (this.splitter) { if (this.splitter) {
this.splitter.remove(); this.splitter.remove();
} }
if (this.dd) { if (this.dd) {
this.dd.unreg(); this.dd.unreg();
this.dd = null; this.dd = null;
} }
if (this.proxy) { if (this.proxy) {
this.proxy.remove(); this.proxy.remove();
} }
if (this.repeater) { if (this.repeater) {
this.repeater.purgeListeners(); this.repeater.purgeListeners();
} }
} if (this.mimicing){
Ext.get(Ext.isIE ? document.body : document).un("mousedown", this.mimicBlur, this);
}
}
}); });
//backwards compat //backwards compat

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
Ext.ns('Ext.ux.form'); Ext.ns('Ext.ux.form');
@ -119,9 +119,11 @@ Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
}, },
reset : function(){ reset : function(){
this.fileInput.remove(); if (this.rendered) {
this.createFileInput(); this.fileInput.remove();
this.bindListeners(); this.createFileInput();
this.bindListeners();
}
Ext.ux.form.FileUploadField.superclass.reset.call(this); Ext.ux.form.FileUploadField.superclass.reset.call(this);
}, },

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
Ext.ns('Ext.ux.form'); Ext.ns('Ext.ux.form');
@ -13,11 +13,11 @@ Ext.ns('Ext.ux.form');
* @xtype spinnerfield * @xtype spinnerfield
*/ */
Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, { Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
actionMode: 'wrap', actionMode: 'wrap',
deferHeight: true, deferHeight: true,
autoSize: Ext.emptyFn, autoSize: Ext.emptyFn,
onBlur: Ext.emptyFn, onBlur: Ext.emptyFn,
adjustSize: Ext.BoxComponent.prototype.adjustSize, adjustSize: Ext.BoxComponent.prototype.adjustSize,
constructor: function(config) { constructor: function(config) {
var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass'); var spinnerConfig = Ext.copyTo({}, config, 'incrementValue,alternateIncrementValue,accelerate,defaultValue,triggerClass,splitterClass');
@ -33,26 +33,26 @@ Ext.ux.form.SpinnerField = Ext.extend(Ext.form.NumberField, {
Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins})); Ext.ux.form.SpinnerField.superclass.constructor.call(this, Ext.apply(config, {plugins: plugins}));
}, },
// private // private
getResizeEl: function(){ getResizeEl: function(){
return this.wrap; return this.wrap;
}, },
// private // private
getPositionEl: function(){ getPositionEl: function(){
return this.wrap; return this.wrap;
}, },
// private // private
alignErrorIcon: function(){ alignErrorIcon: function(){
if (this.wrap) { if (this.wrap) {
this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
} }
}, },
validateBlur: function(){ validateBlur: function(){
return true; return true;
} }
}); });
Ext.reg('spinnerfield', Ext.ux.form.SpinnerField); Ext.reg('spinnerfield', Ext.ux.form.SpinnerField);

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
Ext.ns('Ext.ux.grid'); Ext.ns('Ext.ux.grid');
@ -50,14 +50,14 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
Ext.ux.grid.BufferView.superclass.initTemplates.call(this); Ext.ux.grid.BufferView.superclass.initTemplates.call(this);
var ts = this.templates; var ts = this.templates;
// empty div to act as a place holder for a row // empty div to act as a place holder for a row
ts.rowHolder = new Ext.Template( ts.rowHolder = new Ext.Template(
'<div class="x-grid3-row {alt}" style="{tstyle}"></div>' '<div class="x-grid3-row {alt}" style="{tstyle}"></div>'
); );
ts.rowHolder.disableFormats = true; ts.rowHolder.disableFormats = true;
ts.rowHolder.compile(); ts.rowHolder.compile();
ts.rowBody = new Ext.Template( ts.rowBody = new Ext.Template(
'<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', '<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr>', '<tbody><tr>{cells}</tr>',
(this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''), (this.enableRowBody ? '<tr class="x-grid3-row-body-tr" style="{bodyStyle}"><td colspan="{cols}" class="x-grid3-body-cell" tabIndex="0" hidefocus="on"><div class="x-grid3-row-body">{body}</div></td></tr>' : ''),
'</tbody></table>' '</tbody></table>'
@ -75,15 +75,15 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
}, },
getVisibleRowCount : function(){ getVisibleRowCount : function(){
var rh = this.getCalculatedRowHeight(); var rh = this.getCalculatedRowHeight(),
var visibleHeight = this.scroller.dom.clientHeight; visibleHeight = this.scroller.dom.clientHeight;
return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh); return (visibleHeight < 1) ? 0 : Math.ceil(visibleHeight / rh);
}, },
getVisibleRows: function(){ getVisibleRows: function(){
var count = this.getVisibleRowCount(); var count = this.getVisibleRowCount(),
var sc = this.scroller.dom.scrollTop; sc = this.scroller.dom.scrollTop,
var start = (sc == 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1); start = (sc === 0 ? 0 : Math.floor(sc/this.getCalculatedRowHeight())-1);
return { return {
first: Math.max(start, 0), first: Math.max(start, 0),
last: Math.min(start + count + 2, this.ds.getCount()-1) last: Math.min(start + count + 2, this.ds.getCount()-1)
@ -91,25 +91,34 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
}, },
doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){ doRender : function(cs, rs, ds, startRow, colCount, stripe, onlyBody){
var ts = this.templates, ct = ts.cell, rt = ts.row, rb = ts.rowBody, last = colCount-1; var ts = this.templates,
var rh = this.getStyleRowHeight(); ct = ts.cell,
var vr = this.getVisibleRows(); rt = ts.row,
var tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;'; rb = ts.rowBody,
// buffers last = colCount-1,
var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r; rh = this.getStyleRowHeight(),
vr = this.getVisibleRows(),
tstyle = 'width:'+this.getTotalWidth()+';height:'+rh+'px;',
// buffers
buf = [],
cb,
c,
p = {},
rp = {tstyle: tstyle},
r;
for (var j = 0, len = rs.length; j < len; j++) { for (var j = 0, len = rs.length; j < len; j++) {
r = rs[j]; cb = []; r = rs[j]; cb = [];
var rowIndex = (j+startRow); var rowIndex = (j+startRow),
var visible = rowIndex >= vr.first && rowIndex <= vr.last; visible = rowIndex >= vr.first && rowIndex <= vr.last;
if (visible) { if (visible) {
for (var i = 0; i < colCount; i++) { for (var i = 0; i < colCount; i++) {
c = cs[i]; c = cs[i];
p.id = c.id; p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); p.css = i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
p.attr = p.cellAttr = ""; p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds); p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style; p.style = c.style;
if (p.value == undefined || p.value === "") { if (p.value === undefined || p.value === "") {
p.value = "&#160;"; p.value = "&#160;";
} }
if (r.dirty && typeof r.modified[c.name] !== 'undefined') { if (r.dirty && typeof r.modified[c.name] !== 'undefined') {
@ -119,15 +128,15 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
} }
} }
var alt = []; var alt = [];
if(stripe && ((rowIndex+1) % 2 == 0)){ if(stripe && ((rowIndex+1) % 2 === 0)){
alt[0] = "x-grid3-row-alt"; alt[0] = "x-grid3-row-alt";
} }
if(r.dirty){ if(r.dirty){
alt[1] = " x-grid3-dirty-row"; alt[1] = " x-grid3-dirty-row";
} }
rp.cols = colCount; rp.cols = colCount;
if(this.getRowClass){ if(this.getRowClass){
alt[2] = this.getRowClass(r, rowIndex, rp, ds); alt[2] = this.getRowClass(r, rowIndex, rp, ds);
} }
rp.alt = alt.join(" "); rp.alt = alt.join(" ");
rp.cells = cb.join(""); rp.cells = cb.join("");
@ -158,24 +167,26 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
} }
}, },
onRemove : function(ds, record, index, isUpdate){ onRemove : function(ds, record, index, isUpdate){
Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments); Ext.ux.grid.BufferView.superclass.onRemove.apply(this, arguments);
if(isUpdate !== true){ if(isUpdate !== true){
this.update(); this.update();
} }
}, },
doUpdate: function(){ doUpdate: function(){
if (this.getVisibleRowCount() > 0) { if (this.getVisibleRowCount() > 0) {
var g = this.grid, cm = g.colModel, ds = g.store; var g = this.grid,
var cs = this.getColumnData(); cm = g.colModel,
ds = g.store,
var vr = this.getVisibleRows(); cs = this.getColumnData(),
vr = this.getVisibleRows(),
row;
for (var i = vr.first; i <= vr.last; i++) { for (var i = vr.first; i <= vr.last; i++) {
// if row is NOT rendered and is visible, render it // if row is NOT rendered and is visible, render it
if(!this.isRowRendered(i)){ if(!this.isRowRendered(i) && (row = this.getRow(i))){
var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true); var html = this.doRender(cs, [ds.getAt(i)], ds, i, cm.getColumnCount(), g.stripeRows, true);
this.getRow(i).innerHTML = html; row.innerHTML = html;
} }
} }
this.clean(); this.clean();
@ -212,6 +223,20 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
} }
}, },
removeTask: function(name){
var task = this[name];
if(task && task.cancel){
task.cancel();
this[name] = null;
}
},
destroy : function(){
this.removeTask('cleanTask');
this.removeTask('renderTask');
Ext.ux.grid.BufferView.superclass.destroy.call(this);
},
layout: function(){ layout: function(){
Ext.ux.grid.BufferView.superclass.layout.call(this); Ext.ux.grid.BufferView.superclass.layout.call(this);
this.update(); this.update();

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
Ext.ns('Ext.ux.tree'); Ext.ns('Ext.ux.tree');
@ -42,14 +42,6 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
}else if(Ext.isObject(l) && !l.load){ }else if(Ext.isObject(l) && !l.load){
l = new Ext.ux.tree.TreeGridLoader(l); l = new Ext.ux.tree.TreeGridLoader(l);
} }
else if(l) {
l.createNode = function(attr) {
if (!attr.uiProvider) {
attr.uiProvider = Ext.ux.tree.TreeGridNodeUI;
}
return Ext.tree.TreeLoader.prototype.createNode.call(this, attr);
}
}
this.loader = l; this.loader = l;
Ext.ux.tree.TreeGrid.superclass.initComponent.call(this); Ext.ux.tree.TreeGrid.superclass.initComponent.call(this);
@ -71,7 +63,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
'<div class="x-grid3-header">', '<div class="x-grid3-header">',
'<div class="x-treegrid-header-inner">', '<div class="x-treegrid-header-inner">',
'<div class="x-grid3-header-offset">', '<div class="x-grid3-header-offset">',
'<table cellspacing="0" cellpadding="0" border="0"><colgroup><tpl for="columns"><col /></tpl></colgroup>', '<table style="table-layout: fixed;" cellspacing="0" cellpadding="0" border="0"><colgroup><tpl for="columns"><col /></tpl></colgroup>',
'<thead><tr class="x-grid3-hd-row">', '<thead><tr class="x-grid3-hd-row">',
'<tpl for="columns">', '<tpl for="columns">',
'<td class="x-grid3-hd x-grid3-cell x-treegrid-hd" style="text-align: {align};" id="', this.id, '-xlhd-{#}">', '<td class="x-grid3-hd x-grid3-cell x-treegrid-hd" style="text-align: {align};" id="', this.id, '-xlhd-{#}">',
@ -81,7 +73,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
'</div>', '</div>',
'</td></tpl>', '</td></tpl>',
'</tr></thead>', '</tr></thead>',
'</div></table>', '</table>',
'</div></div>', '</div></div>',
'</div>', '</div>',
'<div class="x-treegrid-root-node">', '<div class="x-treegrid-root-node">',
@ -140,7 +132,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns}); this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
if(this.hideHeaders){ if(this.hideHeaders){
this.header.dom.style.display = 'none'; this.el.child('.x-grid3-header').setDisplayed('none');
} }
else if(this.enableHdMenu !== false){ else if(this.enableHdMenu !== false){
this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'}); this.hmenu = new Ext.menu.Menu({id: this.id + '-hctx'});
@ -172,6 +164,17 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
return node; return node;
}, },
clearInnerCt : function(){
if(Ext.isIE){
var dom = this.innerCt.dom;
while(dom.firstChild){
dom.removeChild(dom.firstChild);
}
}else{
Ext.ux.tree.TreeGrid.superclass.clearInnerCt.call(this);
}
},
initEvents : function() { initEvents : function() {
Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments); Ext.ux.tree.TreeGrid.superclass.initEvents.apply(this, arguments);

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
/** /**
* @class Ext.tree.ColumnResizer * @class Ext.tree.ColumnResizer
@ -80,6 +80,7 @@ Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
}, },
onStart : function(e){ onStart : function(e){
this.dragHeadersDisabled = this.tree.headersDisabled;
this.tree.headersDisabled = true; this.tree.headersDisabled = true;
this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'}); this.proxy = this.tree.body.createChild({cls:'x-treegrid-resizer'});
this.proxy.setHeight(this.tree.body.getHeight()); this.proxy.setHeight(this.tree.body.getHeight());
@ -102,7 +103,8 @@ Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
onEnd : function(e){ onEnd : function(e){
var nw = this.proxy.getWidth(), var nw = this.proxy.getWidth(),
tree = this.tree; tree = this.tree,
disabled = this.dragHeadersDisabled;
this.proxy.remove(); this.proxy.remove();
delete this.dragHd; delete this.dragHd;
@ -111,7 +113,7 @@ Ext.tree.ColumnResizer = Ext.extend(Ext.util.Observable, {
tree.updateColumnWidths(); tree.updateColumnWidths();
setTimeout(function(){ setTimeout(function(){
tree.headersDisabled = false; tree.headersDisabled = disabled;
}, 100); }, 100);
} }
}); });

View file

@ -1,34 +1,28 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
(function() { (function() {
Ext.override(Ext.list.Column, { Ext.override(Ext.list.Column, {
init : function() { init : function() {
if(!this.type){ var types = Ext.data.Types,
this.type = "auto"; st = this.sortType;
}
var st = Ext.data.SortTypes; if(this.type){
// named sortTypes are supported, here we look them up if(Ext.isString(this.type)){
if(typeof this.sortType == "string"){ this.type = Ext.data.Types[this.type.toUpperCase()] || types.AUTO;
this.sortType = st[this.sortType];
}
// set default sortType for strings and dates
if(!this.sortType){
switch(this.type){
case "string":
this.sortType = st.asUCString;
break;
case "date":
this.sortType = st.asDate;
break;
default:
this.sortType = st.none;
} }
}else{
this.type = types.AUTO;
}
// named sortTypes are supported, here we look them up
if(Ext.isString(st)){
this.sortType = Ext.data.SortTypes[st];
}else if(Ext.isEmpty(st)){
this.sortType = this.type.sortType;
} }
} }
}); });

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
/** /**
* @class Ext.ux.tree.TreeGridLoader * @class Ext.ux.tree.TreeGridLoader

View file

@ -1,8 +1,8 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
/** /**
* @class Ext.ux.tree.TreeGridNodeUI * @class Ext.ux.tree.TreeGridNodeUI
@ -21,11 +21,11 @@ Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
buf = [ buf = [
'<tbody class="x-tree-node">', '<tbody class="x-tree-node">',
'<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el ', a.cls, '">', '<tr ext:tree-node-id="', n.id ,'" class="x-tree-node-el x-tree-node-leaf ', a.cls, '">',
'<td class="x-treegrid-col">', '<td class="x-treegrid-col">',
'<span class="x-tree-node-indent">', this.indentMarkup, "</span>", '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
'<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow">', '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
'<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on">', '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " "+a.iconCls : ""), '" unselectable="on" />',
'<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ', '<a hidefocus="on" class="x-tree-node-anchor" href="', a.href ? a.href : '#', '" tabIndex="1" ',
a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>', a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '', '>',
'<span unselectable="on">', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '</span></a>', '<span unselectable="on">', (c.tpl ? c.tpl.apply(a) : a[c.dataIndex] || c.text), '</span></a>',

View file

@ -1,14 +1,30 @@
/*! /*!
* Ext JS Library 3.1.0 * Ext JS Library 3.4.0
* Copyright(c) 2006-2009 Ext JS, LLC * Copyright(c) 2006-2011 Sencha Inc.
* licensing@extjs.com * licensing@sencha.com
* http://www.extjs.com/license * http://www.sencha.com/license
*/ */
Ext.ns('Ext.ux.tree'); Ext.ns('Ext.ux.tree');
/** /**
* @class Ext.ux.tree.TreeGridSorter * @class Ext.ux.tree.TreeGridSorter
* @extends Ext.tree.TreeSorter * @extends Ext.tree.TreeSorter
* Provides sorting of nodes in a {@link Ext.ux.tree.TreeGrid}. The TreeGridSorter automatically monitors events on the
* associated TreeGrid that might affect the tree's sort order (beforechildrenrendered, append, insert and textchange).
* Example usage:<br />
* <pre><code>
new Ext.ux.tree.TreeGridSorter(myTreeGrid, {
folderSort: true,
dir: "desc",
sortType: function(node) {
// sort by a custom, typed attribute:
return parseInt(node.id, 10);
}
});
</code></pre>
* @constructor
* @param {TreeGrid} tree
* @param {Object} config
*/ */
Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, { Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
/** /**
@ -38,32 +54,36 @@ Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
tree.on('headerclick', this.onHeaderClick, this); tree.on('headerclick', this.onHeaderClick, this);
tree.ddAppendOnly = true; tree.ddAppendOnly = true;
me = this; var me = this;
this.defaultSortFn = function(n1, n2){ this.defaultSortFn = function(n1, n2){
var dsc = me.dir && me.dir.toLowerCase() == 'desc'; var desc = me.dir && me.dir.toLowerCase() == 'desc',
var p = me.property || 'text'; prop = me.property || 'text',
var sortType = me.sortType; sortType = me.sortType,
var fs = me.folderSort; caseSensitive = me.caseSensitive === true,
var cs = me.caseSensitive === true; leafAttr = me.leafAttr || 'leaf',
var leafAttr = me.leafAttr || 'leaf'; attr1 = n1.attributes,
attr2 = n2.attributes;
if(fs){ if(me.folderSort){
if(n1.attributes[leafAttr] && !n2.attributes[leafAttr]){ if(attr1[leafAttr] && !attr2[leafAttr]){
return 1; return 1;
} }
if(!n1.attributes[leafAttr] && n2.attributes[leafAttr]){ if(!attr1[leafAttr] && attr2[leafAttr]){
return -1; return -1;
} }
} }
var v1 = sortType ? sortType(n1.attributes[p]) : (cs ? n1.attributes[p] : n1.attributes[p].toUpperCase()); var prop1 = attr1[prop],
var v2 = sortType ? sortType(n2.attributes[p]) : (cs ? n2.attributes[p] : n2.attributes[p].toUpperCase()); prop2 = attr2[prop],
if(v1 < v2){ v1 = sortType ? sortType(prop1) : (caseSensitive ? prop1 : prop1.toUpperCase());
return dsc ? +1 : -1; v2 = sortType ? sortType(prop2) : (caseSensitive ? prop2 : prop2.toUpperCase());
}else if(v1 > v2){
return dsc ? -1 : +1; if(v1 < v2){
return desc ? +1 : -1;
}else if(v1 > v2){
return desc ? -1 : +1;
}else{ }else{
return 0; return 0;
} }
}; };
@ -72,11 +92,12 @@ Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
}, },
onAfterTreeRender : function() { onAfterTreeRender : function() {
var hmenu = this.tree.hmenu; if(this.tree.hmenu){
hmenu.insert(0, this.tree.hmenu.insert(0,
{itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'}, {itemId:'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
{itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'} {itemId:'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
); );
}
this.updateSortIcon(0, 'asc'); this.updateSortIcon(0, 'asc');
}, },
@ -109,8 +130,8 @@ Ext.ux.tree.TreeGridSorter = Ext.extend(Ext.tree.TreeSorter, {
// private // private
updateSortIcon : function(col, dir){ updateSortIcon : function(col, dir){
var sc = this.sortClasses; var sc = this.sortClasses,
var hds = this.tree.innerHd.select('td').removeClass(sc); hds = this.tree.innerHd.select('td').removeClass(sc);
hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]); hds.item(col).addClass(sc[dir == 'desc' ? 1 : 0]);
} }
}); });