JavaScript

开发平台：

JavaScript

ux-all-debug.js：源码内容

// phpMode == false (default):
filter[0][data][type] list
filter[0][data][value] value1
filter[0][data][value] value2
filter[0][field] prod
// phpMode == true:
filter[0][data][type] list
filter[0][data][value] value1, value2
filter[0][field] prod
* </code></pre>
* When GridFilters <code>@cfg encode = true</code>:
* <pre><code>
// phpMode == false (default):
filter : [{"type":"list","value":["small","medium"],"field":"size"}]
// phpMode == true:
filter : [{"type":"list","value":"small,medium","field":"size"}]
* </code></pre>
*/
phpMode : false,
/**
* @cfg {Ext.data.Store} store
* The {@link Ext.data.Store} this list should use as its data source
* when the data source is <b>remote</b>. If the data for the list
* is local, use the <code>{@link #options}</code> config instead.
*/
/**
* @private
* Template method that is to initialize the filter and install required menu items.
* @param {Object} config
*/
init : function (config) {
this.dt = new Ext.util.DelayedTask(this.fireUpdate, this);
// if a menu already existed, do clean up first
if (this.menu){
this.menu.destroy();
}
this.menu = new Ext.ux.menu.ListMenu(config);
this.menu.on('checkchange', this.onCheckChange, this);
},
/**
* @private
* Template method that is to get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
return this.menu.getSelected();
},
/**
* @private
* Template method that is to set the value of the filter.
* @param {Object} value The value to set the filter
*/
setValue : function (value) {
this.menu.setSelected(value);
this.fireEvent('update', this);
},
/**
* @private
* Template method that is to return <tt>true</tt> if the filter
* has enough configuration information to be activated.
* @return {Boolean}
*/
isActivatable : function () {
return this.getValue().length > 0;
},
/**
* @private
* Template method that is to get and return serialized filter data for
* transmission to the server.
* @return {Object/Array} An object or collection of objects containing
* key value pairs representing the current configuration of the filter.
*/
getSerialArgs : function () {
var args = {type: 'list', value: this.phpMode ? this.getValue().join(',') : this.getValue()};
return args;
},
/** @private */
onCheckChange : function(){
this.dt.delay(this.updateBuffer);
},
/**
* Template method that is to validate the provided Ext.data.Record
* against the filters configuration.
* @param {Ext.data.Record} record The record to validate
* @return {Boolean} true if the record is valid within the bounds
* of the filter, false otherwise.
*/
validateRecord : function (record) {
return this.getValue().indexOf(record.get(this.dataIndex)) > -1;
}
});/**
* @class Ext.ux.grid.filter.NumericFilter
* @extends Ext.ux.grid.filter.Filter
* Filters using an Ext.ux.menu.RangeMenu.
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
var filters = new Ext.ux.grid.GridFilters({
...
filters: [{
type: 'numeric',
dataIndex: 'price'
}]
});
* </code></pre>
*/
Ext.ux.grid.filter.NumericFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
/**
* @cfg {Object} fieldCls
* The Class to use to construct each field item within this menu
* Defaults to:<pre>
* fieldCls : Ext.form.NumberField
* </pre>
*/
fieldCls : Ext.form.NumberField,
/**
* @cfg {Object} fieldCfg
* The default configuration options for any field item unless superseded
* by the <code>{@link #fields}</code> configuration.
* Defaults to:<pre>
* fieldCfg : {}
* </pre>
* Example usage:
* <pre><code>
fieldCfg : {
width: 150,
},
* </code></pre>
*/
/**
* @cfg {Object} fields
* The field items may be configured individually
* Defaults to <tt>undefined</tt>.
* Example usage:
* <pre><code>
fields : {
gt: { // override fieldCfg options
width: 200,
fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
}
},
* </code></pre>
*/
/**
* @cfg {Object} iconCls
* The iconCls to be applied to each comparator field item.
* Defaults to:<pre>
iconCls : {
gt : 'ux-rangemenu-gt',
lt : 'ux-rangemenu-lt',
eq : 'ux-rangemenu-eq'
}
* </pre>
*/
iconCls : {
gt : 'ux-rangemenu-gt',
lt : 'ux-rangemenu-lt',
eq : 'ux-rangemenu-eq'
},
/**
* @cfg {Object} menuItemCfgs
* Default configuration options for each menu item
* Defaults to:<pre>
menuItemCfgs : {
emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 125
}
* </pre>
*/
menuItemCfgs : {
emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 125
},
/**
* @cfg {Array} menuItems
* The items to be shown in this menu. Items are added to the menu
* according to their position within this array. Defaults to:<pre>
* menuItems : ['lt','gt','-','eq']
* </pre>
*/
menuItems : ['lt', 'gt', '-', 'eq'],
/**
* @private
* Template method that is to initialize the filter and install required menu items.
*/
init : function (config) {
// if a menu already existed, do clean up first
if (this.menu){
this.menu.destroy();
}
this.menu = new Ext.ux.menu.RangeMenu(Ext.apply(config, {
// pass along filter configs to the menu
fieldCfg : this.fieldCfg || {},
fieldCls : this.fieldCls,
fields : this.fields || {},
iconCls: this.iconCls,
menuItemCfgs: this.menuItemCfgs,
menuItems: this.menuItems,
updateBuffer: this.updateBuffer
}));
// relay the event fired by the menu
this.menu.on('update', this.fireUpdate, this);
},
/**
* @private
* Template method that is to get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
return this.menu.getValue();
},
/**
* @private
* Template method that is to set the value of the filter.
* @param {Object} value The value to set the filter
*/
setValue : function (value) {
this.menu.setValue(value);
},
/**
* @private
* Template method that is to return <tt>true</tt> if the filter
* has enough configuration information to be activated.
* @return {Boolean}
*/
isActivatable : function () {
var values = this.getValue();
for (key in values) {
if (values[key] !== undefined) {
return true;
}
}
return false;
},
/**
* @private
* Template method that is to get and return serialized filter data for
* transmission to the server.
* @return {Object/Array} An object or collection of objects containing
* key value pairs representing the current configuration of the filter.
*/
getSerialArgs : function () {
var key,
args = [],
values = this.menu.getValue();
for (key in values) {
args.push({
type: 'numeric',
comparison: key,
value: values[key]
});
}
return args;
},
/**
* Template method that is to validate the provided Ext.data.Record
* against the filters configuration.
* @param {Ext.data.Record} record The record to validate
* @return {Boolean} true if the record is valid within the bounds
* of the filter, false otherwise.
*/
validateRecord : function (record) {
var val = record.get(this.dataIndex),
values = this.getValue();
if (values.eq !== undefined && val != values.eq) {
return false;
}
if (values.lt !== undefined && val >= values.lt) {
return false;
}
if (values.gt !== undefined && val <= values.gt) {
return false;
}
return true;
}
});/**
* @class Ext.ux.grid.filter.StringFilter
* @extends Ext.ux.grid.filter.Filter
* Filter by a configurable Ext.form.TextField
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
var filters = new Ext.ux.grid.GridFilters({
...
filters: [{
// required configs
type: 'string',
dataIndex: 'name',
// optional configs
value: 'foo',
active: true, // default is false
iconCls: 'ux-gridfilter-text-icon' // default
// any Ext.form.TextField configs accepted
}]
});
* </code></pre>
*/
Ext.ux.grid.filter.StringFilter = Ext.extend(Ext.ux.grid.filter.Filter, {
/**
* @cfg {String} iconCls
* The iconCls to be applied to the menu item.
* Defaults to <tt>'ux-gridfilter-text-icon'</tt>.
*/
iconCls : 'ux-gridfilter-text-icon',
emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 125,
/**
* @private
* Template method that is to initialize the filter and install required menu items.
*/
init : function (config) {
Ext.applyIf(config, {
enableKeyEvents: true,
iconCls: this.iconCls,
listeners: {
scope: this,
keyup: this.onInputKeyUp
}
});
this.inputItem = new Ext.form.TextField(config);
this.menu.add(this.inputItem);
this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
},
/**
* @private
* Template method that is to get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
return this.inputItem.getValue();
},
/**
* @private
* Template method that is to set the value of the filter.
* @param {Object} value The value to set the filter
*/
setValue : function (value) {
this.inputItem.setValue(value);
this.fireEvent('update', this);
},
/**
* @private
* Template method that is to return <tt>true</tt> if the filter
* has enough configuration information to be activated.
* @return {Boolean}
*/
isActivatable : function () {
return this.inputItem.getValue().length > 0;
},
/**
* @private
* Template method that is to get and return serialized filter data for
* transmission to the server.
* @return {Object/Array} An object or collection of objects containing
* key value pairs representing the current configuration of the filter.
*/
getSerialArgs : function () {
return {type: 'string', value: this.getValue()};
},
/**
* Template method that is to validate the provided Ext.data.Record
* against the filters configuration.
* @param {Ext.data.Record} record The record to validate
* @return {Boolean} true if the record is valid within the bounds
* of the filter, false otherwise.
*/
validateRecord : function (record) {
var val = record.get(this.dataIndex);
if(typeof val != 'string') {
return (this.getValue().length === 0);
}
return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
},
/**
* @private
* Handler method called when there is a keyup event on this.inputItem
*/
onInputKeyUp : function (field, e) {
var k = e.getKey();
if (k == e.RETURN && field.isValid()) {
e.stopEvent();
this.menu.hide(true);
return;
}
// restart the timer
this.updateTask.delay(this.updateBuffer);
}
});
Ext.namespace('Ext.ux.menu');
/**
* @class Ext.ux.menu.ListMenu
* @extends Ext.menu.Menu
* This is a supporting class for {@link Ext.ux.grid.filter.ListFilter}.
* Although not listed as configuration options for this class, this class
* also accepts all configuration options from {@link Ext.ux.grid.filter.ListFilter}.
*/
Ext.ux.menu.ListMenu = Ext.extend(Ext.menu.Menu, {
/**
* @cfg {String} labelField
* Defaults to 'text'.
*/
labelField : 'text',
/**
* @cfg {String} paramPrefix
* Defaults to 'Loading...'.
*/
loadingText : 'Loading...',
/**
* @cfg {Boolean} loadOnShow
* Defaults to true.
*/
loadOnShow : true,
/**
* @cfg {Boolean} single
* Specify true to group all items in this list into a single-select
* radio button group. Defaults to false.
*/
single : false,
constructor : function (cfg) {
this.selected = [];
this.addEvents(
/**
* @event checkchange
* Fires when there is a change in checked items from this list
* @param {Object} item Ext.menu.CheckItem
* @param {Object} checked The checked value that was set
*/
'checkchange'
);
Ext.ux.menu.ListMenu.superclass.constructor.call(this, cfg = cfg || {});
if(!cfg.store && cfg.options){
var options = [];
for(var i=0, len=cfg.options.length; i<len; i++){
var value = cfg.options[i];
switch(Ext.type(value)){
case 'array': options.push(value); break;
case 'object': options.push([value.id, value[this.labelField]]); break;
case 'string': options.push([value, value]); break;
}
}
this.store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({id: 0}, ['id', this.labelField]),
data: options,
listeners: {
'load': this.onLoad,
scope: this
}
});
this.loaded = true;
} else {
this.add({text: this.loadingText, iconCls: 'loading-indicator'});
this.store.on('load', this.onLoad, this);
}
},
destroy : function () {
if (this.store) {
this.store.destroy();
}
Ext.ux.menu.ListMenu.superclass.destroy.call(this);
},
/**
* Lists will initially show a 'loading' item while the data is retrieved from the store.
* In some cases the loaded data will result in a list that goes off the screen to the
* right (as placement calculations were done with the loading item). This adapter will
* allow show to be called with no arguments to show with the previous arguments and
* thus recalculate the width and potentially hang the menu from the left.
*/
show : function () {
var lastArgs = null;
return function(){
if(arguments.length === 0){
Ext.ux.menu.ListMenu.superclass.show.apply(this, lastArgs);
} else {
lastArgs = arguments;
if (this.loadOnShow && !this.loaded) {
this.store.load();
}
Ext.ux.menu.ListMenu.superclass.show.apply(this, arguments);
}
};
}(),
/** @private */
onLoad : function (store, records) {
var visible = this.isVisible();
this.hide(false);
this.removeAll(true);
var gid = this.single ? Ext.id() : null;
for(var i=0, len=records.length; i<len; i++){
var item = new Ext.menu.CheckItem({
text: records[i].get(this.labelField),
group: gid,
checked: this.selected.indexOf(records[i].id) > -1,
hideOnClick: false});
item.itemId = records[i].id;
item.on('checkchange', this.checkChange, this);
this.add(item);
}
this.loaded = true;
if (visible) {
this.show();
}
this.fireEvent('load', this, records);
},
/**
* Get the selected items.
* @return {Array} selected
*/
getSelected : function () {
return this.selected;
},
/** @private */
setSelected : function (value) {
value = this.selected = [].concat(value);
if (this.loaded) {
this.items.each(function(item){
item.setChecked(false, true);
for (var i = 0, len = value.length; i < len; i++) {
if (item.itemId == value[i]) {
item.setChecked(true, true);
}
}
}, this);
}
},
/**
* Handler for the 'checkchange' event from an check item in this menu
* @param {Object} item Ext.menu.CheckItem
* @param {Object} checked The checked value that was set
*/
checkChange : function (item, checked) {
var value = [];
this.items.each(function(item){
if (item.checked) {
value.push(item.itemId);
}
},this);
this.selected = value;
this.fireEvent('checkchange', item, checked);
}
});Ext.ns('Ext.ux.menu');
/**
* @class Ext.ux.menu.RangeMenu
* @extends Ext.menu.Menu
* Custom implementation of Ext.menu.Menu that has preconfigured
* items for gt, lt, eq.
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
* </code></pre>
*/
Ext.ux.menu.RangeMenu = Ext.extend(Ext.menu.Menu, {
constructor : function (config) {
Ext.ux.menu.RangeMenu.superclass.constructor.call(this, config);
this.addEvents(
/**
* @event update
* Fires when a filter configuration has changed
* @param {Ext.ux.grid.filter.Filter} this The filter object.
*/
'update'
);
this.updateTask = new Ext.util.DelayedTask(this.fireUpdate, this);
var i, len, item, cfg, Cls;
for (i = 0, len = this.menuItems.length; i < len; i++) {
item = this.menuItems[i];
if (item !== '-') {
// defaults
cfg = {
itemId: 'range-' + item,
enableKeyEvents: true,
iconCls: this.iconCls[item] || 'no-icon',
listeners: {
scope: this,
keyup: this.onInputKeyUp
}
};
Ext.apply(
cfg,
// custom configs
Ext.applyIf(this.fields[item] || {}, this.fieldCfg[item]),
// configurable defaults
this.menuItemCfgs
);
Cls = cfg.fieldCls || this.fieldCls;
item = this.fields[item] = new Cls(cfg);
}
this.add(item);
}
},
/**
* @private
* called by this.updateTask
*/
fireUpdate : function () {
this.fireEvent('update', this);
},
/**
* Get and return the value of the filter.
* @return {String} The value of this filter
*/
getValue : function () {
var result = {}, key, field;
for (key in this.fields) {
field = this.fields[key];
if (field.isValid() && String(field.getValue()).length > 0) {
result[key] = field.getValue();
}
}
return result;
},
/**
* Set the value of this menu and fires the 'update' event.
* @param {Object} data The data to assign to this menu
*/
setValue : function (data) {
var key;
for (key in this.fields) {
this.fields[key].setValue(data[key] !== undefined ? data[key] : '');
}
this.fireEvent('update', this);
},
/**
* @private
* Handler method called when there is a keyup event on an input
* item of this menu.
*/
onInputKeyUp : function (field, e) {
var k = e.getKey();
if (k == e.RETURN && field.isValid()) {
e.stopEvent();
this.hide(true);
return;
}
if (field == this.fields.eq) {
if (this.fields.gt) {
this.fields.gt.setValue(null);
}
if (this.fields.lt) {
this.fields.lt.setValue(null);
}
}
else {
this.fields.eq.setValue(null);
}
// restart the timer
this.updateTask.delay(this.updateBuffer);
}
});
Ext.ns('Ext.ux.grid');
/**
* @class Ext.ux.grid.GroupSummary
* @extends Ext.util.Observable
* A GridPanel plugin that enables dynamic column calculations and a dynamically
* updated grouped summary row.
*/
Ext.ux.grid.GroupSummary = Ext.extend(Ext.util.Observable, {
/**
* @cfg {Function} summaryRenderer Renderer example:<pre><code>
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
* </code></pre>
*/
/**
* @cfg {String} summaryType (Optional) The type of
* calculation to be used for the column. For options available see
* {@link #Calculations}.
*/
constructor : function(config){
Ext.apply(this, config);
Ext.ux.grid.GroupSummary.superclass.constructor.call(this);
},
init : function(grid){
this.grid = grid;
var v = this.view = grid.getView();
v.doGroupEnd = this.doGroupEnd.createDelegate(this);
v.afterMethod('onColumnWidthUpdated', this.doWidth, this);
v.afterMethod('onAllColumnWidthsUpdated', this.doAllWidths, this);
v.afterMethod('onColumnHiddenUpdated', this.doHidden, this);
v.afterMethod('onUpdate', this.doUpdate, this);
v.afterMethod('onRemove', this.doRemove, this);
if(!this.rowTpl){
this.rowTpl = new Ext.Template(
'<div class="x-grid3-summary-row" style="{tstyle}">',
'<table class="x-grid3-summary-table" border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
'<tbody><tr>{cells}</tr></tbody>',
'</table></div>'
);
this.rowTpl.disableFormats = true;
}
this.rowTpl.compile();
if(!this.cellTpl){
this.cellTpl = new Ext.Template(
'<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} {css}" style="{style}">',
'<div class="x-grid3-cell-inner x-grid3-col-{id}" unselectable="on">{value}</div>',
"</td>"
);
this.cellTpl.disableFormats = true;
}
this.cellTpl.compile();
},
/**
* Toggle the display of the summary row on/off
* @param {Boolean} visible <tt>true</tt> to show the summary, <tt>false</tt> to hide the summary.
*/
toggleSummaries : function(visible){
var el = this.grid.getGridEl();
if(el){
if(visible === undefined){
visible = el.hasClass('x-grid-hide-summary');
}
el[visible ? 'removeClass' : 'addClass']('x-grid-hide-summary');
}
},
renderSummary : function(o, cs){
cs = cs || this.view.getColumnData();
var cfg = this.grid.getColumnModel().config,
buf = [], c, p = {}, cf, last = cs.length-1;
for(var i = 0, len = cs.length; i < len; i++){
c = cs[i];
cf = cfg[i];
p.id = c.id;
p.style = c.style;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
if(cf.summaryType || cf.summaryRenderer){
p.value = (cf.summaryRenderer || c.renderer)(o.data[c.name], p, o);
}else{
p.value = '';
}
if(p.value == undefined || p.value === "") p.value = " ";
buf[buf.length] = this.cellTpl.apply(p);
}
return this.rowTpl.apply({
tstyle: 'width:'+this.view.getTotalWidth()+';',
cells: buf.join('')
});
},
/**
* @private
* @param {Object} rs
* @param {Object} cs
*/
calculate : function(rs, cs){
var data = {}, r, c, cfg = this.grid.getColumnModel().config, cf;
for(var j = 0, jlen = rs.length; j < jlen; j++){
r = rs[j];
for(var i = 0, len = cs.length; i < len; i++){
c = cs[i];
cf = cfg[i];
if(cf.summaryType){
data[c.name] = Ext.ux.grid.GroupSummary.Calculations[cf.summaryType](data[c.name] || 0, r, c.name, data);
}
}
}
return data;
},
doGroupEnd : function(buf, g, cs, ds, colCount){
var data = this.calculate(g.rs, cs);
buf.push('</div>', this.renderSummary({data: data}, cs), '</div>');
},
doWidth : function(col, w, tw){
var gs = this.view.getGroups(), s;
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.width = w;
}
},
doAllWidths : function(ws, tw){
var gs = this.view.getGroups(), s, cells, wlen = ws.length;
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
cells = s.firstChild.rows[0].childNodes;
for(var j = 0; j < wlen; j++){
cells[j].style.width = ws[j];
}
}
},
doHidden : function(col, hidden, tw){
var gs = this.view.getGroups(), s, display = hidden ? 'none' : '';
for(var i = 0, len = gs.length; i < len; i++){
s = gs[i].childNodes[2];
s.style.width = tw;
s.firstChild.style.width = tw;
s.firstChild.rows[0].childNodes[col].style.display = display;
}
},
// Note: requires that all (or the first) record in the
// group share the same group value. Returns false if the group
// could not be found.
refreshSummary : function(groupValue){
return this.refreshSummaryById(this.view.getGroupId(groupValue));
},
getSummaryNode : function(gid){
var g = Ext.fly(gid, '_gsummary');
if(g){
return g.down('.x-grid3-summary-row', true);
}
return null;
},
refreshSummaryById : function(gid){
var g = Ext.getDom(gid);
if(!g){
return false;
}
var rs = [];
this.grid.getStore().each(function(r){
if(r._groupId == gid){
rs[rs.length] = r;
}
});
var cs = this.view.getColumnData(),
data = this.calculate(rs, cs),
markup = this.renderSummary({data: data}, cs),
existing = this.getSummaryNode(gid);
if(existing){
g.removeChild(existing);
}
Ext.DomHelper.append(g, markup);
return true;
},
doUpdate : function(ds, record){
this.refreshSummaryById(record._groupId);
},
doRemove : function(ds, record, index, isUpdate){
if(!isUpdate){
this.refreshSummaryById(record._groupId);
}
},
/**
* Show a message in the summary row.
* <pre><code>
grid.on('afteredit', function(){
var groupValue = 'Ext Forms: Field Anchoring';
summary.showSummaryMsg(groupValue, 'Updating Summary...');
});
* </code></pre>
* @param {String} groupValue
* @param {String} msg Text to use as innerHTML for the summary row.
*/
showSummaryMsg : function(groupValue, msg){
var gid = this.view.getGroupId(groupValue),
node = this.getSummaryNode(gid);
if(node){
node.innerHTML = '<div class="x-grid3-summary-msg">' + msg + '</div>';
}
}
});
//backwards compat
Ext.grid.GroupSummary = Ext.ux.grid.GroupSummary;
/**
* Calculation types for summary row:</p><div class="mdetail-params"><ul>
* <li><b><tt>sum</tt></b> : <div class="sub-desc"></div></li>
* <li><b><tt>count</tt></b> : <div class="sub-desc"></div></li>
* <li><b><tt>max</tt></b> : <div class="sub-desc"></div></li>
* <li><b><tt>min</tt></b> : <div class="sub-desc"></div></li>
* <li><b><tt>average</tt></b> : <div class="sub-desc"></div></li>
* </ul></div>
* <p>Custom calculations may be implemented. An example of
* custom <code>summaryType=totalCost</code>:</p><pre><code>
// define a custom summary function
Ext.ux.grid.GroupSummary.Calculations['totalCost'] = function(v, record, field){
return v + (record.data.estimate * record.data.rate);
};
* </code></pre>
* @property Calculations
*/
Ext.ux.grid.GroupSummary.Calculations = {
'sum' : function(v, record, field){
return v + (record.data[field]||0);
},
'count' : function(v, record, field, data){
return data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
},
'max' : function(v, record, field, data){
var v = record.data[field];
var max = data[field+'max'] === undefined ? (data[field+'max'] = v) : data[field+'max'];
return v > max ? (data[field+'max'] = v) : max;
},
'min' : function(v, record, field, data){
var v = record.data[field];
var min = data[field+'min'] === undefined ? (data[field+'min'] = v) : data[field+'min'];
return v < min ? (data[field+'min'] = v) : min;
},
'average' : function(v, record, field, data){
var c = data[field+'count'] ? ++data[field+'count'] : (data[field+'count'] = 1);
var t = (data[field+'total'] = ((data[field+'total']||0) + (record.data[field]||0)));
return t === 0 ? 0 : t / c;
}
};
Ext.grid.GroupSummary.Calculations = Ext.ux.grid.GroupSummary.Calculations;
/**
* @class Ext.ux.grid.HybridSummary
* @extends Ext.ux.grid.GroupSummary
* Adds capability to specify the summary data for the group via json as illustrated here:
* <pre><code>
{
data: [
{
projectId: 100, project: 'House',
taskId: 112, description: 'Paint',
estimate: 6, rate: 150,
due:'06/24/2007'
},
...
],
summaryData: {
'House': {
description: 14, estimate: 9,
rate: 99, due: new Date(2009, 6, 29),
cost: 999
}
}
}
* </code></pre>
*
*/
Ext.ux.grid.HybridSummary = Ext.extend(Ext.ux.grid.GroupSummary, {
/**
* @private
* @param {Object} rs
* @param {Object} cs
*/
calculate : function(rs, cs){
var gcol = this.view.getGroupField(),
gvalue = rs[0].data[gcol],
gdata = this.getSummaryData(gvalue);
return gdata || Ext.ux.grid.HybridSummary.superclass.calculate.call(this, rs, cs);
},
/**
* <pre><code>
grid.on('afteredit', function(){
var groupValue = 'Ext Forms: Field Anchoring';
summary.showSummaryMsg(groupValue, 'Updating Summary...');
setTimeout(function(){ // simulate server call
// HybridSummary class implements updateSummaryData
summary.updateSummaryData(groupValue,
// create data object based on configured dataIndex
{description: 22, estimate: 888, rate: 888, due: new Date(), cost: 8});
}, 2000);
});
* </code></pre>
* @param {String} groupValue
* @param {Object} data data object
* @param {Boolean} skipRefresh (Optional) Defaults to false
*/
updateSummaryData : function(groupValue, data, skipRefresh){
var json = this.grid.getStore().reader.jsonData;
if(!json.summaryData){
json.summaryData = {};
}
json.summaryData[groupValue] = data;
if(!skipRefresh){
this.refreshSummary(groupValue);
}
},
/**
* Returns the summaryData for the specified groupValue or null.
* @param {String} groupValue
* @return {Object} summaryData
*/
getSummaryData : function(groupValue){
var json = this.grid.getStore().reader.jsonData;
if(json && json.summaryData){
return json.summaryData[groupValue];
}
return null;
}
});
//backwards compat
Ext.grid.HybridSummary = Ext.ux.grid.HybridSummary;
Ext.ux.GroupTab = Ext.extend(Ext.Container, {
mainItem: 0,
expanded: true,
deferredRender: true,
activeTab: null,
idDelimiter: '__',
headerAsText: false,
frame: false,
hideBorders: true,
initComponent: function(config){
Ext.apply(this, config);
this.frame = false;
Ext.ux.GroupTab.superclass.initComponent.call(this);
this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
this.setLayout(new Ext.layout.CardLayout({
deferredRender: this.deferredRender
}));
if (!this.stack) {
this.stack = Ext.TabPanel.AccessStack();
}
this.initItems();
this.on('beforerender', function(){
this.groupEl = this.ownerCt.getGroupEl(this);
}, this);
this.on('add', this.onAdd, this, {
target: this
});
this.on('remove', this.onRemove, this, {
target: this
});
if (this.mainItem !== undefined) {
var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
delete this.mainItem;
this.setMainItem(item);
}
},
/**
* Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
* can return false to cancel the tab change.
* @param {String/Panel} tab The id or tab Panel to activate
*/
setActiveTab : function(item){
item = this.getComponent(item);
if(!item){
return false;
}
if(!this.rendered){
this.activeTab = item;
return true;
}
if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
if(this.activeTab && this.activeTab != this.mainItem){
var oldEl = this.getTabEl(this.activeTab);
if(oldEl){
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
}
}
var el = this.getTabEl(item);
Ext.fly(el).addClass('x-grouptabs-strip-active');
this.activeTab = item;
this.stack.add(item);
this.layout.setActiveItem(item);
if(this.layoutOnTabChange && item.doLayout){
item.doLayout();
}
if(this.scrolling){
this.scrollToTab(item, this.animScroll);
}
this.fireEvent('tabchange', this, item);
return true;
}
return false;
},
getTabEl: function(item){
if (item == this.mainItem) {
return this.groupEl;
}
return Ext.TabPanel.prototype.getTabEl.call(this, item);
},
onRender: function(ct, position){
Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
this.strip = Ext.fly(this.groupEl).createChild({
tag: 'ul',
cls: 'x-grouptabs-sub'
});
this.tooltip = new Ext.ToolTip({
target: this.groupEl,
delegate: 'a.x-grouptabs-text',
trackMouse: true,
renderTo: document.body,
listeners: {
beforeshow: function(tip) {
var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
? this.mainItem
: this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
if(!item.tabTip) {
return false;
}
tip.body.dom.innerHTML = item.tabTip;
},
scope: this
}
});
if (!this.itemTpl) {
var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
tt.disableFormats = true;
tt.compile();
Ext.ux.GroupTab.prototype.itemTpl = tt;
}
this.items.each(this.initTab, this);
},
afterRender: function(){
Ext.ux.GroupTab.superclass.afterRender.call(this);
if (this.activeTab !== undefined) {
var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
delete this.activeTab;
this.setActiveTab(item);
}
},
// private
initTab: function(item, index){
var before = this.strip.dom.childNodes[index];
var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
if (item === this.mainItem) {
item.tabEl = this.groupEl;
p.cls += ' x-grouptabs-main-item';
}
var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
item.tabEl = item.tabEl || el;
item.on('disable', this.onItemDisabled, this);
item.on('enable', this.onItemEnabled, this);
item.on('titlechange', this.onItemTitleChanged, this);
item.on('iconchange', this.onItemIconChanged, this);
item.on('beforeshow', this.onBeforeShowItem, this);
},
setMainItem: function(item){
item = this.getComponent(item);
if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
return;
}
this.mainItem = item;
},
getMainItem: function(){
return this.mainItem || null;
},
// private
onBeforeShowItem: function(item){
if (item != this.activeTab) {
this.setActiveTab(item);
return false;
}
},
// private
onAdd: function(gt, item, index){
if (this.rendered) {
this.initTab.call(this, item, index);
}
},
// private
onRemove: function(tp, item){
Ext.destroy(Ext.get(this.getTabEl(item)));
this.stack.remove(item);
item.un('disable', this.onItemDisabled, this);
item.un('enable', this.onItemEnabled, this);
item.un('titlechange', this.onItemTitleChanged, this);
item.un('iconchange', this.onItemIconChanged, this);
item.un('beforeshow', this.onBeforeShowItem, this);
if (item == this.activeTab) {
var next = this.stack.next();
if (next) {
this.setActiveTab(next);
}
else if (this.items.getCount() > 0) {
this.setActiveTab(0);
}
else {
this.activeTab = null;
}
}
},
// private
onBeforeAdd: function(item){
var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
if (existing) {
this.setActiveTab(item);
return false;
}
Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
var es = item.elements;
item.elements = es ? es.replace(',header', '') : es;
item.border = (item.border === true);
},
// private
onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
// private
onItemTitleChanged: function(item){
var el = this.getTabEl(item);
if (el) {
Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
}
},
//private
onItemIconChanged: function(item, iconCls, oldCls){
var el = this.getTabEl(item);
if (el) {
Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
}
},
beforeDestroy: function(){
Ext.TabPanel.prototype.beforeDestroy.call(this);
this.tooltip.destroy();
}
});
Ext.reg('grouptab', Ext.ux.GroupTab);
Ext.ns('Ext.ux');
Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
tabPosition: 'left',
alternateColor: false,
alternateCls: 'x-grouptabs-panel-alt',
defaultType: 'grouptab',
deferredRender: false,
activeGroup : null,
initComponent: function(){
Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
this.addEvents(
'beforegroupchange',
'groupchange'
);
this.elements = 'body,header';
this.stripTarget = 'header';
this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
this.addClass('x-grouptabs-panel');
if (this.tabStyle && this.tabStyle != '') {
this.addClass('x-grouptabs-panel-' + this.tabStyle);
}
if (this.alternateColor) {
this.addClass(this.alternateCls);
}
this.on('beforeadd', function(gtp, item, index){
this.initGroup(item, index);
});
},
initEvents : function() {
this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
},
onRender: function(ct, position){
Ext.TabPanel.superclass.onRender.call(this, ct, position);
if(this.plain){
var pos = this.tabPosition == 'top' ? 'header' : 'footer';
this[pos].addClass('x-tab-panel-'+pos+'-plain');
}
var st = this[this.stripTarget];
this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
this.header.addClass('x-grouptabs-panel-header');
this.bwrap.addClass('x-grouptabs-bwrap');
this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');
if (!this.groupTpl) {
var tt = new Ext.Template(
'<li class="{cls}" id="{id}">',
'<a class="x-grouptabs-expand" onclick="return false;"></a>',
'<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',
'<span>{text}</span></a>',
'</li>'
);
tt.disableFormats = true;
tt.compile();
Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
}
this.items.each(this.initGroup, this);
},
afterRender: function(){
Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
cls: 'x-tab-joint'
});
this.addClass('x-tab-panel-' + this.tabPosition);
this.header.setWidth(this.tabWidth);
if (this.activeGroup !== undefined) {
var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);
delete this.activeGroup;
this.setActiveGroup(group);
group.setActiveTab(group.getMainItem());
}
},
getGroupEl : Ext.TabPanel.prototype.getTabEl,
// private
findTargets: function(e){
var item = null,
itemEl = e.getTarget('li', this.strip);
if (itemEl) {
item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
if (item.disabled) {
return {
expand: null,
item: null,
el: null
};
}
}
return {
expand: e.getTarget('.x-grouptabs-expand', this.strip),
isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
item: item,
el: itemEl
};
},
// private
onStripMouseDown: function(e){
if (e.button != 0) {
return;
}
e.preventDefault();
var t = this.findTargets(e);
if (t.expand) {
this.toggleGroup(t.el);
}
else if (t.item) {
if(t.isGroup) {
t.item.setActiveTab(t.item.getMainItem());
}
else {
t.item.ownerCt.setActiveTab(t.item);
}
}
},
expandGroup: function(groupEl){
if(groupEl.isXType) {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).addClass('x-grouptabs-expanded');
this.syncTabJoint();
},
toggleGroup: function(groupEl){
if(groupEl.isXType) {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
this.syncTabJoint();
},
collapseGroup: function(groupEl){
if(groupEl.isXType) {
groupEl = this.getGroupEl(groupEl);
}
Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
this.syncTabJoint();
},
syncTabJoint: function(groupEl){
if (!this.tabJoint) {
return;
}
groupEl = groupEl || this.getGroupEl(this.activeGroup);
if(groupEl) {
this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
var y = Ext.isGecko2 ? 0 : 1;
if (this.tabPosition == 'left'){
this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
}
else {
this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
}
}
else {
this.tabJoint.hide();
}
},
getActiveTab : function() {
if(!this.activeGroup) return null;
return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
},
onResize: function(){
Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
this.syncTabJoint();
},
createCorner: function(el, pos){
return Ext.fly(el).createChild({
cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
});
},
initGroup: function(group, index){
var before = this.strip.dom.childNodes[index],
p = this.getTemplateArgs(group);
if (index === 0) {
p.cls += ' x-tab-first';
}
p.cls += ' x-grouptabs-main';
p.text = group.getMainItem().title;
var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),
tl = this.createCorner(el, 'top-' + this.tabPosition),
bl = this.createCorner(el, 'bottom-' + this.tabPosition);
group.tabEl = el;
if (group.expanded) {
this.expandGroup(el);
}
if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
bl.setLeft('-10px');
bl.setBottom('-5px');
tl.setLeft('-10px');
tl.setTop('-5px');
}
this.mon(group, {
scope: this,
changemainitem: this.onGroupChangeMainItem,
beforetabchange: this.onGroupBeforeTabChange
});
},
setActiveGroup : function(group) {
group = this.getComponent(group);
if(!group){
return false;
}
if(!this.rendered){
this.activeGroup = group;
return true;
}
if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){
if(this.activeGroup){
var oldEl = this.getGroupEl(this.activeGroup);
if(oldEl){
Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
}
}
var groupEl = this.getGroupEl(group);
Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
this.activeGroup = group;
this.stack.add(group);
this.layout.setActiveItem(group);
this.syncTabJoint(groupEl);
this.fireEvent('groupchange', this, group);
return true;
}
return false;
},
onGroupBeforeTabChange: function(group, newTab, oldTab){
if(group !== this.activeGroup || newTab !== oldTab) {
this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');
}
this.expandGroup(this.getGroupEl(group));
if(group !== this.activeGroup) {
return this.setActiveGroup(group);
}
},
getFrameHeight: function(){
var h = this.el.getFrameWidth('tb');
h += (this.tbar ? this.tbar.getHeight() : 0) +
(this.bbar ? this.bbar.getHeight() : 0);
return h;
},
adjustBodyWidth: function(w){
return w - this.tabWidth;
}
});
Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);/*
* Note that this control will most likely remain as an example, and not as a core Ext form
* control. However, the API will be changing in a future release and so should not yet be
* treated as a final, stable API at this time.
*/
/**
* @class Ext.ux.form.ItemSelector
* @extends Ext.form.Field
* A control that allows selection of between two Ext.ux.form.MultiSelect controls.
*
* @history
* 2008-06-19 bpm Original code contributed by Toby Stuart (with contributions from Robert Williams)
*
* @constructor
* Create a new ItemSelector
* @param {Object} config Configuration options
* @xtype itemselector
*/
Ext.ux.form.ItemSelector = Ext.extend(Ext.form.Field, {
hideNavIcons:false,
imagePath:"",
iconUp:"up2.gif",
iconDown:"down2.gif",
iconLeft:"left2.gif",
iconRight:"right2.gif",
iconTop:"top2.gif",
iconBottom:"bottom2.gif",
drawUpIcon:true,
drawDownIcon:true,
drawLeftIcon:true,
drawRightIcon:true,
drawTopIcon:true,
drawBotIcon:true,
delimiter:',',
bodyStyle:null,
border:false,
defaultAutoCreate:{tag: "div"},
/**
* @cfg {Array} multiselects An array of {@link Ext.ux.form.MultiSelect} config objects, with at least all required parameters (e.g., store)
*/
multiselects:null,
initComponent: function(){
Ext.ux.form.ItemSelector.superclass.initComponent.call(this);
this.addEvents({
'rowdblclick' : true,
'change' : true
});
},
onRender: function(ct, position){
Ext.ux.form.ItemSelector.superclass.onRender.call(this, ct, position);
// Internal default configuration for both multiselects
var msConfig = [{
legend: 'Available',
draggable: true,
droppable: true,
width: 100,
height: 100
},{
legend: 'Selected',
droppable: true,
draggable: true,
width: 100,
height: 100
}];
this.fromMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[0], msConfig[0]));
this.fromMultiselect.on('dblclick', this.onRowDblClick, this);
this.toMultiselect = new Ext.ux.form.MultiSelect(Ext.applyIf(this.multiselects[1], msConfig[1]));
this.toMultiselect.on('dblclick', this.onRowDblClick, this);
var p = new Ext.Panel({
bodyStyle:this.bodyStyle,
border:this.border,
layout:"table",
layoutConfig:{columns:3}
});
p.add(this.fromMultiselect);
var icons = new Ext.Panel({header:false});
p.add(icons);
p.add(this.toMultiselect);
p.render(this.el);
icons.el.down('.'+icons.bwrapCls).remove();
// ICON HELL!!!
if (this.imagePath!="" && this.imagePath.charAt(this.imagePath.length-1)!="/")
this.imagePath+="/";
this.iconUp = this.imagePath + (this.iconUp || 'up2.gif');
this.iconDown = this.imagePath + (this.iconDown || 'down2.gif');
this.iconLeft = this.imagePath + (this.iconLeft || 'left2.gif');
this.iconRight = this.imagePath + (this.iconRight || 'right2.gif');
this.iconTop = this.imagePath + (this.iconTop || 'top2.gif');
this.iconBottom = this.imagePath + (this.iconBottom || 'bottom2.gif');
var el=icons.getEl();
this.toTopIcon = el.createChild({tag:'img', src:this.iconTop, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.upIcon = el.createChild({tag:'img', src:this.iconUp, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.addIcon = el.createChild({tag:'img', src:this.iconRight, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.removeIcon = el.createChild({tag:'img', src:this.iconLeft, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.downIcon = el.createChild({tag:'img', src:this.iconDown, style:{cursor:'pointer', margin:'2px'}});
el.createChild({tag: 'br'});
this.toBottomIcon = el.createChild({tag:'img', src:this.iconBottom, style:{cursor:'pointer', margin:'2px'}});
this.toTopIcon.on('click', this.toTop, this);
this.upIcon.on('click', this.up, this);
this.downIcon.on('click', this.down, this);
this.toBottomIcon.on('click', this.toBottom, this);
this.addIcon.on('click', this.fromTo, this);
this.removeIcon.on('click', this.toFrom, this);
if (!this.drawUpIcon || this.hideNavIcons) { this.upIcon.dom.style.display='none'; }
if (!this.drawDownIcon || this.hideNavIcons) { this.downIcon.dom.style.display='none'; }
if (!this.drawLeftIcon || this.hideNavIcons) { this.addIcon.dom.style.display='none'; }
if (!this.drawRightIcon || this.hideNavIcons) { this.removeIcon.dom.style.display='none'; }
if (!this.drawTopIcon || this.hideNavIcons) { this.toTopIcon.dom.style.display='none'; }
if (!this.drawBotIcon || this.hideNavIcons) { this.toBottomIcon.dom.style.display='none'; }
var tb = p.body.first();
this.el.setWidth(p.body.first().getWidth());
p.body.removeClass();
this.hiddenName = this.name;
var hiddenTag = {tag: "input", type: "hidden", value: "", name: this.name};
this.hiddenField = this.el.createChild(hiddenTag);
},
doLayout: function(){
if(this.rendered){
this.fromMultiselect.fs.doLayout();
this.toMultiselect.fs.doLayout();
}
},
afterRender: function(){
Ext.ux.form.ItemSelector.superclass.afterRender.call(this);
this.toStore = this.toMultiselect.store;
this.toStore.on('add', this.valueChanged, this);
this.toStore.on('remove', this.valueChanged, this);
this.toStore.on('load', this.valueChanged, this);
this.valueChanged(this.toStore);
},
toTop : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=records.length-1; i>-1; i--) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(0, record);
selectionsArray.push(((records.length - 1) - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},
toBottom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
selectionsArray.sort();
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount()) - (records.length - i));
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(selectionsArray);
},
up : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] - 1) >= 0) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] - 1, record);
newSelectionsArray.push(selectionsArray[i] - 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},
down : function() {
var record = null;
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
selectionsArray.sort();
selectionsArray.reverse();
var newSelectionsArray = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
if ((selectionsArray[i] + 1) < this.toMultiselect.view.store.getCount()) {
this.toMultiselect.view.store.remove(record);
this.toMultiselect.view.store.insert(selectionsArray[i] + 1, record);
newSelectionsArray.push(selectionsArray[i] + 1);
}
}
this.toMultiselect.view.refresh();
this.toMultiselect.view.select(newSelectionsArray);
}
},
fromTo : function() {
var selectionsArray = this.fromMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.fromMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
if(!this.allowDup)selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
if(this.allowDup){
var x=new Ext.data.Record();
record.id=x.id;
delete x;
this.toMultiselect.view.store.add(record);
}else{
this.fromMultiselect.view.store.remove(record);
this.toMultiselect.view.store.add(record);
selectionsArray.push((this.toMultiselect.view.store.getCount() - 1));
}
}
}
this.toMultiselect.view.refresh();
this.fromMultiselect.view.refresh();
var si = this.toMultiselect.store.sortInfo;
if(si){
this.toMultiselect.store.sort(si.field, si.direction);
}
this.toMultiselect.view.select(selectionsArray);
},
toFrom : function() {
var selectionsArray = this.toMultiselect.view.getSelectedIndexes();
var records = [];
if (selectionsArray.length > 0) {
for (var i=0; i<selectionsArray.length; i++) {
record = this.toMultiselect.view.store.getAt(selectionsArray[i]);
records.push(record);
}
selectionsArray = [];
for (var i=0; i<records.length; i++) {
record = records[i];
this.toMultiselect.view.store.remove(record);
if(!this.allowDup){
this.fromMultiselect.view.store.add(record);
selectionsArray.push((this.fromMultiselect.view.store.getCount() - 1));
}
}
}
this.fromMultiselect.view.refresh();
this.toMultiselect.view.refresh();
var si = this.fromMultiselect.store.sortInfo;
if (si){
this.fromMultiselect.store.sort(si.field, si.direction);
}
this.fromMultiselect.view.select(selectionsArray);
},
valueChanged: function(store) {
var record = null;
var values = [];
for (var i=0; i<store.getCount(); i++) {
record = store.getAt(i);
values.push(record.get(this.toMultiselect.valueField));
}
this.hiddenField.dom.value = values.join(this.delimiter);
this.fireEvent('change', this, this.getValue(), this.hiddenField.dom.value);
},
getValue : function() {
return this.hiddenField.dom.value;
},
onRowDblClick : function(vw, index, node, e) {
if (vw == this.toMultiselect.view){
this.toFrom();
} else if (vw == this.fromMultiselect.view) {
this.fromTo();
}
return this.fireEvent('rowdblclick', vw, index, node, e);
},
reset: function(){
range = this.toMultiselect.store.getRange();
this.toMultiselect.store.removeAll();
this.fromMultiselect.store.add(range);
var si = this.fromMultiselect.store.sortInfo;
if (si){
this.fromMultiselect.store.sort(si.field, si.direction);
}
this.valueChanged(this.toMultiselect.store);
}
});
Ext.reg('itemselector', Ext.ux.form.ItemSelector);
//backwards compat
Ext.ux.ItemSelector = Ext.ux.form.ItemSelector;
Ext.ns('Ext.ux.grid');
Ext.ux.grid.LockingGridView = Ext.extend(Ext.grid.GridView, {
lockText : 'Lock',
unlockText : 'Unlock',
rowBorderWidth : 1,
lockedBorderWidth : 1,
/*
* This option ensures that height between the rows is synchronized
* between the locked and unlocked sides. This option only needs to be used
* when the row heights isn't predictable.
*/
syncHeights: false,
initTemplates : function(){
var ts = this.templates || {};
if(!ts.master){
ts.master = new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-locked">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{lstyle}">{lockedHeader}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{lstyle}">{lockedBody}</div><div class="x-grid3-scroll-spacer"></div></div>',
'</div>',
'<div class="x-grid3-viewport x-grid3-unlocked">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><a href="#" class="x-grid3-focus" tabIndex="-1"></a></div>',
'</div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',
'</div>'
);
}
this.templates = ts;
Ext.ux.grid.LockingGridView.superclass.initTemplates.call(this);
},
getEditorParent : function(ed){
return this.el.dom;
},
initElements : function(){
var E = Ext.Element;
var el = this.grid.getGridEl().dom.firstChild;
var cs = el.childNodes;
this.el = new E(el);
this.lockedWrap = new E(cs[0]);
this.lockedHd = new E(this.lockedWrap.dom.firstChild);
this.lockedInnerHd = this.lockedHd.dom.firstChild;
this.lockedScroller = new E(this.lockedWrap.dom.childNodes[1]);
this.lockedBody = new E(this.lockedScroller.dom.firstChild);
this.mainWrap = new E(cs[1]);
this.mainHd = new E(this.mainWrap.dom.firstChild);
if(this.grid.hideHeaders){
this.lockedHd.setDisplayed(false);
this.mainHd.setDisplayed(false);
}
this.innerHd = this.mainHd.dom.firstChild;
this.scroller = new E(this.mainWrap.dom.childNodes[1]);
if(this.forceFit){
this.scroller.setStyle('overflow-x', 'hidden');
}
this.mainBody = new E(this.scroller.dom.firstChild);
this.focusEl = new E(this.scroller.dom.childNodes[1]);
this.focusEl.swallowEvent('click', true);
this.resizeMarker = new E(cs[2]);
this.resizeProxy = new E(cs[3]);
},
getLockedRows : function(){
return this.hasRows() ? this.lockedBody.dom.childNodes : [];
},
getLockedRow : function(row){
return this.getLockedRows()[row];
},
getCell : function(row, col){
var llen = this.cm.getLockedCount();
if(col < llen){
return this.getLockedRow(row).getElementsByTagName('td')[col];
}
return Ext.ux.grid.LockingGridView.superclass.getCell.call(this, row, col - llen);
},
getHeaderCell : function(index){
var llen = this.cm.getLockedCount();
if(index < llen){
return this.lockedHd.dom.getElementsByTagName('td')[index];
}
return Ext.ux.grid.LockingGridView.superclass.getHeaderCell.call(this, index - llen);
},
addRowClass : function(row, cls){
var r = this.getLockedRow(row);
if(r){
this.fly(r).addClass(cls);
}
Ext.ux.grid.LockingGridView.superclass.addRowClass.call(this, row, cls);
},
removeRowClass : function(row, cls){
var r = this.getLockedRow(row);
if(r){
this.fly(r).removeClass(cls);
}
Ext.ux.grid.LockingGridView.superclass.removeRowClass.call(this, row, cls);
},
removeRow : function(row) {
Ext.removeNode(this.getLockedRow(row));
Ext.ux.grid.LockingGridView.superclass.removeRow.call(this, row);
},
removeRows : function(firstRow, lastRow){
var bd = this.lockedBody.dom;
for(var rowIndex = firstRow; rowIndex <= lastRow; rowIndex++){
Ext.removeNode(bd.childNodes[firstRow]);
}
Ext.ux.grid.LockingGridView.superclass.removeRows.call(this, firstRow, lastRow);
},
syncScroll : function(e){
var mb = this.scroller.dom;
this.lockedScroller.dom.scrollTop = mb.scrollTop;
Ext.ux.grid.LockingGridView.superclass.syncScroll.call(this, e);
},
updateSortIcon : function(col, dir){
var sc = this.sortClasses,
lhds = this.lockedHd.select('td').removeClass(sc),
hds = this.mainHd.select('td').removeClass(sc),
llen = this.cm.getLockedCount(),
cls = sc[dir == 'DESC' ? 1 : 0];
if(col < llen){
lhds.item(col).addClass(cls);
}else{
hds.item(col - llen).addClass(cls);
}
},
updateAllColumnWidths : function(){
var tw = this.getTotalWidth(),
clen = this.cm.getColumnCount(),
lw = this.getLockedWidth(),
llen = this.cm.getLockedCount(),
ws = [], len, i;
this.updateLockedWidth();
for(i = 0; i < clen; i++){
ws[i] = this.getColumnWidth(i);
var hd = this.getHeaderCell(i);
hd.style.width = ws[i];
}
var lns = this.getLockedRows(), ns = this.getRows(), row, trow, j;
for(i = 0, len = ns.length; i < len; i++){
row = lns[i];
row.style.width = lw;
if(row.firstChild){
row.firstChild.style.width = lw;
trow = row.firstChild.rows[0];
for (j = 0; j < llen; j++) {
trow.childNodes[j].style.width = ws[j];
}
}
row = ns[i];
row.style.width = tw;
if(row.firstChild){
row.firstChild.style.width = tw;
trow = row.firstChild.rows[0];
for (j = llen; j < clen; j++) {
trow.childNodes[j - llen].style.width = ws[j];
}
}
}
this.onAllColumnWidthsUpdated(ws, tw);
this.syncHeaderHeight();
},
updateColumnWidth : function(col, width){
var w = this.getColumnWidth(col),
llen = this.cm.getLockedCount(),
ns, rw, c, row;
this.updateLockedWidth();
if(col < llen){
ns = this.getLockedRows();
rw = this.getLockedWidth();
c = col;
}else{
ns = this.getRows();
rw = this.getTotalWidth();
c = col - llen;
}
var hd = this.getHeaderCell(col);
hd.style.width = w;
for(var i = 0, len = ns.length; i < len; i++){
row = ns[i];
row.style.width = rw;
if(row.firstChild){
row.firstChild.style.width = rw;
row.firstChild.rows[0].childNodes[c].style.width = w;
}
}
this.onColumnWidthUpdated(col, w, this.getTotalWidth());
this.syncHeaderHeight();
},
updateColumnHidden : function(col, hidden){
var llen = this.cm.getLockedCount(),
ns, rw, c, row,
display = hidden ? 'none' : '';
this.updateLockedWidth();
if(col < llen){
ns = this.getLockedRows();
rw = this.getLockedWidth();
c = col;
}else{
ns = this.getRows();
rw = this.getTotalWidth();
c = col - llen;
}
var hd = this.getHeaderCell(col);
hd.style.display = display;
for(var i = 0, len = ns.length; i < len; i++){
row = ns[i];
row.style.width = rw;
if(row.firstChild){
row.firstChild.style.width = rw;
row.firstChild.rows[0].childNodes[c].style.display = display;
}
}
this.onColumnHiddenUpdated(col, hidden, this.getTotalWidth());
delete this.lastViewWidth;
this.layout();
},
doRender : function(cs, rs, ds, startRow, colCount, stripe){
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1,
tstyle = 'width:'+this.getTotalWidth()+';',
lstyle = 'width:'+this.getLockedWidth()+';',
buf = [], lbuf = [], cb, lcb, c, p = {}, rp = {}, r;
for(var j = 0, len = rs.length; j < len; j++){
r = rs[j]; cb = []; lcb = [];
var rowIndex = (j+startRow);
for(var i = 0; i < colCount; i++){
c = cs[i];
p.id = c.id;
p.css = (i === 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '')) +
(this.cm.config[i].cellCls ? ' ' + this.cm.config[i].cellCls : '');
p.attr = p.cellAttr = '';
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if(Ext.isEmpty(p.value)){
p.value = ' ';
}
if(this.markDirty && r.dirty && Ext.isDefined(r.modified[c.name])){
p.css += ' x-grid3-dirty-cell';
}
if(c.locked){
lcb[lcb.length] = ct.apply(p);
}else{
cb[cb.length] = ct.apply(p);
}
}
var alt = [];
if(stripe && ((rowIndex+1) % 2 === 0)){
alt[0] = 'x-grid3-row-alt';
}
if(r.dirty){
alt[1] = ' x-grid3-dirty-row';
}
rp.cols = colCount;
if(this.getRowClass){
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}
rp.alt = alt.join(' ');
rp.cells = cb.join('');
rp.tstyle = tstyle;
buf[buf.length] = rt.apply(rp);
rp.cells = lcb.join('');
rp.tstyle = lstyle;
lbuf[lbuf.length] = rt.apply(rp);
}
return [buf.join(''), lbuf.join('')];
},
processRows : function(startRow, skipStripe){
if(!this.ds || this.ds.getCount() < 1){
return;
}
var rows = this.getRows(),
lrows = this.getLockedRows(),
row, lrow;
skipStripe = skipStripe || !this.grid.stripeRows;
startRow = startRow || 0;
for(var i = 0, len = rows.length; i < len; ++i){
row = rows[i];
lrow = lrows[i];
row.rowIndex = i;
lrow.rowIndex = i;
if(!skipStripe){
row.className = row.className.replace(this.rowClsRe, ' ');
lrow.className = lrow.className.replace(this.rowClsRe, ' ');
if ((idx + 1) % 2 === 0){
row.className += ' x-grid3-row-alt';
lrow.className += ' x-grid3-row-alt';
}
}
if(this.syncHeights){
var el1 = Ext.get(row),
el2 = Ext.get(lrow),
h1 = el1.getHeight(),
h2 = el2.getHeight();
if(h1 > h2){
el2.setHeight(h1);
}else if(h2 > h1){
el1.setHeight(h2);
}
}
}
if(startRow === 0){
Ext.fly(rows[0]).addClass(this.firstRowCls);
Ext.fly(lrows[0]).addClass(this.firstRowCls);
}
Ext.fly(rows[rows.length - 1]).addClass(this.lastRowCls);
Ext.fly(lrows[lrows.length - 1]).addClass(this.lastRowCls);
},
afterRender : function(){
if(!this.ds || !this.cm){
return;
}
var bd = this.renderRows() || [' ', ' '];
this.mainBody.dom.innerHTML = bd[0];
this.lockedBody.dom.innerHTML = bd[1];
this.processRows(0, true);
if(this.deferEmptyText !== true){
this.applyEmptyText();
}
},
renderUI : function(){
var header = this.renderHeaders();
var body = this.templates.body.apply({rows:' '});
var html = this.templates.master.apply({
body: body,
header: header[0],
ostyle: 'width:'+this.getOffsetWidth()+';',
bstyle: 'width:'+this.getTotalWidth()+';',
lockedBody: body,
lockedHeader: header[1],
lstyle: 'width:'+this.getLockedWidth()+';'
});
var g = this.grid;
g.getGridEl().dom.innerHTML = html;
this.initElements();
Ext.fly(this.innerHd).on('click', this.handleHdDown, this);
Ext.fly(this.lockedInnerHd).on('click', this.handleHdDown, this);
this.mainHd.on({
scope: this,
mouseover: this.handleHdOver,
mouseout: this.handleHdOut,
mousemove: this.handleHdMove
});
this.lockedHd.on({
scope: this,
mouseover: this.handleHdOver,
mouseout: this.handleHdOut,
mousemove: this.handleHdMove
});
this.scroller.on('scroll', this.syncScroll, this);
if(g.enableColumnResize !== false){
this.splitZone = new Ext.grid.GridView.SplitDragZone(g, this.mainHd.dom);
this.splitZone.setOuterHandleElId(Ext.id(this.lockedHd.dom));
this.splitZone.setOuterHandleElId(Ext.id(this.mainHd.dom));
}
if(g.enableColumnMove){
this.columnDrag = new Ext.grid.GridView.ColumnDragZone(g, this.innerHd);
this.columnDrag.setOuterHandleElId(Ext.id(this.lockedInnerHd));
this.columnDrag.setOuterHandleElId(Ext.id(this.innerHd));
this.columnDrop = new Ext.grid.HeaderDropZone(g, this.mainHd.dom);
}
if(g.enableHdMenu !== false){
this.hmenu = new Ext.menu.Menu({id: g.id + '-hctx'});
this.hmenu.add(
{itemId: 'asc', text: this.sortAscText, cls: 'xg-hmenu-sort-asc'},
{itemId: 'desc', text: this.sortDescText, cls: 'xg-hmenu-sort-desc'}
);
if(this.grid.enableColLock !== false){
this.hmenu.add('-',
{itemId: 'lock', text: this.lockText, cls: 'xg-hmenu-lock'},
{itemId: 'unlock', text: this.unlockText, cls: 'xg-hmenu-unlock'}
);
}
if(g.enableColumnHide !== false){
this.colMenu = new Ext.menu.Menu({id:g.id + '-hcols-menu'});
this.colMenu.on({
scope: this,
beforeshow: this.beforeColMenuShow,
itemclick: this.handleHdMenuClick
});
this.hmenu.add('-', {
itemId:'columns',
hideOnClick: false,
text: this.columnsText,
menu: this.colMenu,
iconCls: 'x-cols-icon'
});
}
this.hmenu.on('itemclick', this.handleHdMenuClick, this);
}
if(g.trackMouseOver){
this.mainBody.on({
scope: this,
mouseover: this.onRowOver,
mouseout: this.onRowOut
});
this.lockedBody.on({
scope: this,
mouseover: this.onRowOver,
mouseout: this.onRowOut
});
}
if(g.enableDragDrop || g.enableDrag){
this.dragZone = new Ext.grid.GridDragZone(g, {
ddGroup : g.ddGroup || 'GridDD'
});
}
this.updateHeaderSortState();
},
layout : function(){
if(!this.mainBody){
return;
}
var g = this.grid;
var c = g.getGridEl();
var csize = c.getSize(true);
var vw = csize.width;
if(!g.hideHeaders && (vw < 20 || csize.height < 20)){
return;
}
this.syncHeaderHeight();
if(g.autoHeight){
this.scroller.dom.style.overflow = 'visible';
this.lockedScroller.dom.style.overflow = 'visible';
if(Ext.isWebKit){