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,429 +10,434 @@
* 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
Ext.form.Spinner = Ext.ux.Spinner; Ext.form.Spinner = Ext.ux.Spinner;

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("");
@ -157,25 +166,27 @@ Ext.ux.grid.BufferView = Ext.extend(Ext.grid.GridView, {
this.doUpdate(); this.doUpdate();
} }
}, },
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,15 +1,15 @@
/*! /*!
* 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.TreeGrid * @class Ext.ux.tree.TreeGrid
* @extends Ext.tree.TreePanel * @extends Ext.tree.TreePanel
* *
* @xtype treegrid * @xtype treegrid
*/ */
Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, { Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
@ -23,14 +23,14 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
enableSort : true, enableSort : true,
reserveScrollOffset : true, reserveScrollOffset : true,
enableHdMenu : true, enableHdMenu : true,
columnsText : 'Columns', columnsText : 'Columns',
initComponent : function() { initComponent : function() {
if(!this.root) { if(!this.root) {
this.root = new Ext.tree.AsyncTreeNode({text: 'Root'}); this.root = new Ext.tree.AsyncTreeNode({text: 'Root'});
} }
// initialize the loader // initialize the loader
var l = this.loader; var l = this.loader;
if(!l){ if(!l){
@ -42,36 +42,28 @@ 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);
this.initColumns(); this.initColumns();
if(this.enableSort) { if(this.enableSort) {
this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort); this.treeGridSorter = new Ext.ux.tree.TreeGridSorter(this, this.enableSort);
} }
if(this.columnResize){ if(this.columnResize){
this.colResizer = new Ext.tree.ColumnResizer(this.columnResize); this.colResizer = new Ext.tree.ColumnResizer(this.columnResize);
this.colResizer.init(this); this.colResizer.init(this);
} }
var c = this.columns; var c = this.columns;
if(!this.internalTpl){ if(!this.internalTpl){
this.internalTpl = new Ext.XTemplate( this.internalTpl = new Ext.XTemplate(
'<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">',
@ -89,7 +81,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
'</div>' '</div>'
); );
} }
if(!this.colgroupTpl) { if(!this.colgroupTpl) {
this.colgroupTpl = new Ext.XTemplate( this.colgroupTpl = new Ext.XTemplate(
'<colgroup><tpl for="columns"><col style="width: {width}px"/></tpl></colgroup>' '<colgroup><tpl for="columns"><col style="width: {width}px"/></tpl></colgroup>'
@ -99,7 +91,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
initColumns : function() { initColumns : function() {
var cs = this.columns, var cs = this.columns,
len = cs.length, len = cs.length,
columns = [], columns = [],
i, c; i, c;
@ -111,7 +103,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
} }
c.init(this); c.init(this);
columns.push(c); columns.push(c);
if(this.enableSort !== false && c.sortable !== false) { if(this.enableSort !== false && c.sortable !== false) {
c.sortable = true; c.sortable = true;
this.enableSort = true; this.enableSort = true;
@ -125,22 +117,22 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
Ext.tree.TreePanel.superclass.onRender.apply(this, arguments); Ext.tree.TreePanel.superclass.onRender.apply(this, arguments);
this.el.addClass('x-treegrid'); this.el.addClass('x-treegrid');
this.outerCt = this.body.createChild({ this.outerCt = this.body.createChild({
cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines') cls:'x-tree-root-ct x-treegrid-ct ' + (this.useArrows ? 'x-tree-arrows' : this.lines ? 'x-tree-lines' : 'x-tree-no-lines')
}); });
this.internalTpl.overwrite(this.outerCt, {columns: this.columns}); this.internalTpl.overwrite(this.outerCt, {columns: this.columns});
this.mainHd = Ext.get(this.outerCt.dom.firstChild); this.mainHd = Ext.get(this.outerCt.dom.firstChild);
this.innerHd = Ext.get(this.mainHd.dom.firstChild); this.innerHd = Ext.get(this.mainHd.dom.firstChild);
this.innerBody = Ext.get(this.outerCt.dom.lastChild); this.innerBody = Ext.get(this.outerCt.dom.lastChild);
this.innerCt = Ext.get(this.innerBody.dom.firstChild); this.innerCt = Ext.get(this.innerBody.dom.firstChild);
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'});
@ -164,14 +156,25 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
}, },
setRootNode : function(node){ setRootNode : function(node){
node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI; node.attributes.uiProvider = Ext.ux.tree.TreeGridRootNodeUI;
node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node); node = Ext.ux.tree.TreeGrid.superclass.setRootNode.call(this, node);
if(this.innerCt) { if(this.innerCt) {
this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns}); this.colgroupTpl.insertFirst(this.innerCt, {columns: this.columns});
} }
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);
@ -183,10 +186,10 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
mouseout: this.handleHdOut mouseout: this.handleHdOut
}); });
}, },
onResize : function(w, h) { onResize : function(w, h) {
Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments); Ext.ux.tree.TreeGrid.superclass.onResize.apply(this, arguments);
var bd = this.innerBody.dom; var bd = this.innerBody.dom;
var hd = this.innerHd.dom; var hd = this.innerHd.dom;
@ -198,7 +201,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px'; bd.style.height = this.body.getHeight(true) - hd.offsetHeight + 'px';
} }
if(Ext.isNumber(w)){ if(Ext.isNumber(w)){
var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth()); var sw = Ext.num(this.scrollOffset, Ext.getScrollBarWidth());
if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){ if(this.reserveScrollOffset || ((bd.offsetWidth - bd.clientWidth) > 10)){
this.setScrollOffset(sw); this.setScrollOffset(sw);
@ -225,7 +228,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px'; g.childNodes[i].style.width = (c.hidden ? 0 : c.width) + 'px';
} }
} }
for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) { for(i = 0, groups = this.innerHd.query('td'), len = groups.length; i<len; i++) {
c = Ext.fly(groups[i]); c = Ext.fly(groups[i]);
if(cols[i] && cols[i].hidden) { if(cols[i] && cols[i].hidden) {
@ -236,23 +239,23 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
} }
} }
var tcw = this.getTotalColumnWidth(); var tcw = this.getTotalColumnWidth();
Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0)); Ext.fly(this.innerHd.dom.firstChild).setWidth(tcw + (this.scrollOffset || 0));
this.outerCt.select('table').setWidth(tcw); this.outerCt.select('table').setWidth(tcw);
this.syncHeaderScroll(); this.syncHeaderScroll();
}, },
getVisibleColumns : function() { getVisibleColumns : function() {
var columns = [], var columns = [],
cs = this.columns, cs = this.columns,
len = cs.length, len = cs.length,
i; i;
for(i = 0; i<len; i++) { for(i = 0; i<len; i++) {
if(!cs[i].hidden) { if(!cs[i].hidden) {
columns.push(cs[i]); columns.push(cs[i]);
} }
} }
return columns; return columns;
}, },
@ -265,7 +268,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
}, },
setScrollOffset : function(scrollOffset) { setScrollOffset : function(scrollOffset) {
this.scrollOffset = scrollOffset; this.scrollOffset = scrollOffset;
this.updateColumnWidths(); this.updateColumnWidths();
}, },
@ -279,17 +282,17 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
index = this.findHeaderIndex(hd), index = this.findHeaderIndex(hd),
c = cs[index], c = cs[index],
sort = c.sortable; sort = c.sortable;
e.stopEvent(); e.stopEvent();
Ext.fly(hd).addClass('x-grid3-hd-menu-open'); Ext.fly(hd).addClass('x-grid3-hd-menu-open');
this.hdCtxIndex = index; this.hdCtxIndex = index;
this.fireEvent('headerbuttonclick', ms, c, hd, index); this.fireEvent('headerbuttonclick', ms, c, hd, index);
this.hmenu.on('hide', function(){ this.hmenu.on('hide', function(){
Ext.fly(hd).removeClass('x-grid3-hd-menu-open'); Ext.fly(hd).removeClass('x-grid3-hd-menu-open');
}, this, {single:true}); }, this, {single:true});
this.hmenu.show(t, 'tl-bl?'); this.hmenu.show(t, 'tl-bl?');
} }
else if(hd) { else if(hd) {
@ -299,8 +302,8 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
}, },
// private // private
handleHdOver : function(e, t){ handleHdOver : function(e, t){
var hd = e.getTarget('.x-treegrid-hd'); var hd = e.getTarget('.x-treegrid-hd');
if(hd && !this.headersDisabled){ if(hd && !this.headersDisabled){
index = this.findHeaderIndex(hd); index = this.findHeaderIndex(hd);
this.activeHdRef = t; this.activeHdRef = t;
@ -314,7 +317,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
} }
} }
}, },
// private // private
handleHdOut : function(e, t){ handleHdOut : function(e, t){
var hd = e.getTarget('.x-treegrid-hd'); var hd = e.getTarget('.x-treegrid-hd');
@ -324,7 +327,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
hd.style.cursor = ''; hd.style.cursor = '';
} }
}, },
findHeaderIndex : function(hd){ findHeaderIndex : function(hd){
hd = hd.dom || hd; hd = hd.dom || hd;
var cs = hd.parentNode.childNodes; var cs = hd.parentNode.childNodes;
@ -335,13 +338,13 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
} }
return -1; return -1;
}, },
// private // private
beforeColMenuShow : function(){ beforeColMenuShow : function(){
var cols = this.columns, var cols = this.columns,
colCount = cols.length, colCount = cols.length,
i, c; i, c;
this.colMenu.removeAll(); this.colMenu.removeAll();
for(i = 1; i < colCount; i++){ for(i = 1; i < colCount; i++){
c = cols[i]; c = cols[i];
if(c.hideable !== false){ if(c.hideable !== false){
@ -355,24 +358,24 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
} }
} }
}, },
// private // private
handleHdMenuClick : function(item){ handleHdMenuClick : function(item){
var index = this.hdCtxIndex, var index = this.hdCtxIndex,
id = item.getItemId(); id = item.getItemId();
if(this.fireEvent('headermenuclick', this.columns[index], id, index) !== false) { if(this.fireEvent('headermenuclick', this.columns[index], id, index) !== false) {
index = id.substr(4); index = id.substr(4);
if(index > 0 && this.columns[index]) { if(index > 0 && this.columns[index]) {
this.setColumnVisible(index, !item.checked); this.setColumnVisible(index, !item.checked);
} }
} }
return true; return true;
}, },
setColumnVisible : function(index, visible) { setColumnVisible : function(index, visible) {
this.columns[index].hidden = !visible; this.columns[index].hidden = !visible;
this.updateColumnWidths(); this.updateColumnWidths();
}, },
@ -397,7 +400,7 @@ Ext.ux.tree.TreeGrid = Ext.extend(Ext.tree.TreePanel, {
this.innerHd.dom.scrollLeft = mb.scrollLeft; this.innerHd.dom.scrollLeft = mb.scrollLeft;
this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore) this.innerHd.dom.scrollLeft = mb.scrollLeft; // second time for IE (1/2 time first fails, other browsers ignore)
}, },
registerNode : function(n) { registerNode : function(n) {
Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n); Ext.ux.tree.TreeGrid.superclass.registerNode.call(this, n);
if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) { if(!n.uiProvider && !n.isRoot && !n.ui.isTreeGridNodeUI) {

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
@ -10,7 +10,7 @@
*/ */
Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
isTreeGridNodeUI: true, isTreeGridNodeUI: true,
renderElements : function(n, a, targetNode, bulkRender){ renderElements : function(n, a, targetNode, bulkRender){
var t = n.getOwnerTree(), var t = n.getOwnerTree(),
cols = t.columns, cols = t.columns,
@ -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>',
@ -77,14 +77,14 @@ Ext.ux.tree.TreeGridNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
isTreeGridNodeUI: true, isTreeGridNodeUI: true,
// private // private
render : function(){ render : function(){
if(!this.rendered){ if(!this.rendered){
this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom; this.wrap = this.ctNode = this.node.ownerTree.innerCt.dom;
this.node.expanded = true; this.node.expanded = true;
} }
if(Ext.isWebKit) { if(Ext.isWebKit) {
// weird table-layout: fixed issue in webkit // weird table-layout: fixed issue in webkit
var ct = this.ctNode; var ct = this.ctNode;
@ -101,7 +101,7 @@ Ext.ux.tree.TreeGridRootNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
} }
delete this.node; delete this.node;
}, },
collapse : Ext.emptyFn, collapse : Ext.emptyFn,
expand : Ext.emptyFn expand : Ext.emptyFn
}); });

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]);
} }
}); });