List filters are able to be preloaded/backed by an Ext.data.Store to load
* their options the first time they are shown. ListFilter utilizes the
* {@link Ext.ux.menu.ListMenu} component.
* Although not shown here, this class accepts all configuration options
* for {@link Ext.ux.menu.ListMenu}.
*
* Each item within the provided array may be in one of the
* following formats:
*
* - Array :
*
options: [
[11, 'extra small'],
[18, 'small'],
[22, 'medium'],
[35, 'large'],
[44, 'extra large']
]
*
*
* - Object :
*
labelField: 'name', // override default of 'text'
options: [
{id: 11, name:'extra small'},
{id: 18, name:'small'},
{id: 22, name:'medium'},
{id: 35, name:'large'},
{id: 44, name:'extra large'}
]
*
*
* - String :
*
* options: ['extra small', 'small', 'medium', 'large', 'extra large']
*
*
*/
/**
* @cfg {Boolean} phpMode
* Adjust the format of this filter. Defaults to false.
*
When GridFilters @cfg encode = false (default):
*
// 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
*
* When GridFilters
@cfg encode = true:
*
// phpMode == false (default):
filter : [{"type":"list","value":["small","medium"],"field":"size"}]
// phpMode == true:
filter : [{"type":"list","value":"small,medium","field":"size"}]
*
*/
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
remote. If the data for the list
* is local, use the
{@link #options} 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
true 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.
*
Example Usage:
*
var filters = new Ext.ux.grid.GridFilters({
...
filters: [{
type: 'numeric',
dataIndex: 'price'
}]
});
*
*/
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:
* fieldCls : Ext.form.NumberField
*
*/
fieldCls : Ext.form.NumberField,
/**
* @cfg {Object} fieldCfg
* The default configuration options for any field item unless superseded
* by the
{@link #fields} configuration.
* Defaults to:
* fieldCfg : {}
*
* Example usage:
*
fieldCfg : {
width: 150,
},
*
*/
/**
* @cfg {Object} fields
* The field items may be configured individually
* Defaults to
undefined.
* Example usage:
*
fields : {
gt: { // override fieldCfg options
width: 200,
fieldCls: Ext.ux.form.CustomNumberField // to override default {@link #fieldCls}
}
},
*
*/
/**
* @cfg {Object} iconCls
* The iconCls to be applied to each comparator field item.
* Defaults to:
iconCls : {
gt : 'ux-rangemenu-gt',
lt : 'ux-rangemenu-lt',
eq : 'ux-rangemenu-eq'
}
*
*/
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:
menuItemCfgs : {
emptyText: 'Enter Filter Text...',
selectOnFocus: true,
width: 125
}
*
*/
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:
* menuItems : ['lt','gt','-','eq']
*
*/
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
true 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
*
Example Usage:
*
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
}]
});
*
*/
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
'ux-gridfilter-text-icon'.
*/
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
true 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
-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.
* Example Usage:
*
*
*/
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:
summaryRenderer: function(v, params, data){
return ((v === 0 || v > 1) ? '(' + v +' Tasks)' : '(1 Task)');
},
*
*/
/**
* @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(
''
);
this.rowTpl.disableFormats = true;
}
this.rowTpl.compile();
if(!this.cellTpl){
this.cellTpl = new Ext.Template(
'',
' {value} ',
" | "
);
this.cellTpl.disableFormats = true;
}
this.cellTpl.compile();
},
/**
* Toggle the display of the summary row on/off
* @param {Boolean} visible true to show the summary, false 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('Custom calculations may be implemented. An example of
* custom summaryType=totalCost:
',
'
',
'',
'', n.text || (c.renderer ? c.renderer(a[c.dataIndex], n, a) : a[c.dataIndex]),"",
"