Code:
Ext.define('OPApp.widget.HeaderFilters', {
alias: 'plugin.gridheaderfilters',
alternateClassName: ['Ext.ux.grid.HeaderFilters', 'Ext.ux.grid.header.Filters'],
requires: [
'Ext.container.Container',
'Ext.tip.ToolTip'
],
grid: null,
fields: null,
containers: null,
storeLoaded: false,
filterFieldCls: 'x-gridheaderfilters-filter-field',
filterContainerCls: 'x-gridheaderfilters-filter-container',
filterRoot: 'data',
tooltipTpl: '{[Ext.isEmpty(values.filters) ? this.text.noFilter : "<b>"+this.text.activeFilters+"</b>"]}<br><tpl for="filters"><tpl if="value != \'\'">{[values.label ? values.label : values.property]} = {value}<br></tpl></tpl>',
lastApplyFilters: null,
bundle: {
activeFilters: 'Active filters',
noFilter: 'No filter'
},
/**
* @cfg {Boolean} stateful
* Specifies if headerFilters values are saved into grid status when filters changes.
* This configuration can be overridden from grid configuration parameter <code>statefulHeaderFilters</code> (if defined).
* Used only if grid <b>is stateful</b>. Default = true.
*
*/
stateful: true,
/**
* @cfg {Boolean} reloadOnChange
* Specifies if the grid store will be auto-reloaded when filters change. The store
* will be reloaded only if is was already loaded. If the store is local or it doesn't has remote filters
* the store will be always updated on filters change.
*
*/
reloadOnChange: true,
/**
* @cfg {Boolean} ensureFilteredVisible
* If the column on wich the filter is set is hidden and can be made visible, the
* plugin makes the column visible.
*/
ensureFilteredVisible: true,
/**
* @cfg {Boolean} enableTooltip
* If a tooltip with active filters description must be enabled on the grid header
*/
enableTooltip: false,
statusProperty: 'headerFilters',
rendered: false,
constructor: function (cfg) {
if (cfg) {
Ext.apply(this, cfg);
}
},
init: function (grid) {
this.grid = grid;
var me = this;
this.delayedApplyFiltersTask = new Ext.util.DelayedTask(function () {
me.applyFilters();
});
/*var storeProxy = this.grid.getStore().getProxy();
if(storeProxy && storeProxy.getReader())
{
var reader = storeProxy.getReader();
this.filterRoot = reader.root ? reader.root : undefined;
}*/
/**
* @cfg {Object} headerFilters
* <b>Configuration attribute for grid</b>
* Allows to initialize header filters values from grid configuration.
* This object must have filter names as keys and filter values as values.
* If this plugin has {@link #stateful} enabled, the saved filters have priority and override these filters.
* Use {@link #ignoreSavedHeaderFilters} to ignore current status and apply these filters directly.
*/
if (!grid.headerFilters)
grid.headerFilters = {};
if (Ext.isBoolean(grid.statefulHeaderFilters)) {
this.setStateful(grid.statefulHeaderFilters);
}
/**
* @event headerfilterchange
* <b>Event enabled on the Grid</b>: fired when at least one filter is updated after apply.
* @param {Ext.grid.Panel} grid The grid
* @param {Ext.util.MixedCollection} filters The applied filters (after apply). Ext.util.Filter objects.
* @param {Ext.util.MixedCollection} prevFilters The old applied filters (before apply). Ext.util.Filter objects.
* @param {Number} active Number of active filters (not empty)
* @param {Ext.data.Store} store Current grid store
*/
/**
* @event headerfiltersrender
* <b>Event enabled on the Grid</b>: fired when filters are rendered
* @param {Ext.grid.Panel} grid The grid
* @param {Object} fields The filter fields rendered. The object has for keys the filters names and for value Ext.form.field.Field objects.
* @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
*/
/**
* @event beforeheaderfiltersapply
* <b>Event enabled on the Grid</b>: fired before filters are confirmed. If the handler returns false no filter apply occurs.
* @param {Ext.grid.Panel} grid The grid
* @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
* @param {Ext.data.Store} store Current grid store
*/
/**
* @event headerfiltersapply
*<b>Event enabled on the Grid</b>: fired when filters are confirmed.
* @param {Ext.grid.Panel} grid The grid
* @param {Object} filters Current header filters. The object has for keys the filters names and for value the filters values.
* @param {Number} active Number of active filters (not empty)
* @param {Ext.data.Store} store Current grid store
*/
this.grid.on({
scope: this,
columnresize: this.resizeFilterContainer,
beforedestroy: this.onDestroy,
beforestatesave: this.saveFilters,
afterlayout: this.adjustFilterWidth
});
this.grid.headerCt.on({
scope: this,
afterrender: this.renderFilters
});
this.grid.getStore().on({
scope: this,
load: this.onStoreLoad
});
if (this.reloadOnChange) {
this.grid.on('headerfilterchange', this.reloadStore, this);
}
if (this.stateful) {
this.grid.addStateEvents('headerfilterchange');
}
//Enable new grid methods
Ext.apply(this.grid,
{
headerFilterPlugin: this,
setHeaderFilter: function (sName, sValue) {
if (!this.headerFilterPlugin) {
return;
}
var fd = {};
fd[sName] = sValue;
this.headerFilterPlugin.setFilters(fd);
},
/**
* Returns a collection of filters corresponding to enabled header filters.
* If a filter field is disabled, the filter is not included.
* <b>This method is enabled on Grid</b>.
* @method
* @return {Array[Ext.util.Filter]} An array of Ext.util.Filter
*/
getHeaderFilters: function () {
if (!this.headerFilterPlugin) {
return null;
}
return this.headerFilterPlugin.getFilters();
},
/**
* Set header filter values
* <b>Method enabled on Grid</b>
* @method
* @param {Object or Array[Object]} filters An object with key/value pairs or an array of Ext.util.Filter objects (or corresponding configuration).
* Only filters that matches with header filters names will be set
*/
setHeaderFilters: function (obj) {
if (!this.headerFilterPlugin) {
return;
}
this.headerFilterPlugin.setFilters(obj);
},
getHeaderFilterField: function (fn) {
if (!this.headerFilterPlugin) {
return;
}
if (this.headerFilterPlugin.fields[fn]) {
return this.headerFilterPlugin.fields[fn];
}
else {
return null;
}
},
resetHeaderFilters: function () {
if (!this.headerFilterPlugin) {
return;
}
this.headerFilterPlugin.resetFilters();
},
clearHeaderFilters: function () {
if (!this.headerFilterPlugin) {
return;
}
this.headerFilterPlugin.clearFilters();
},
applyHeaderFilters: function () {
if (!this.headerFilterPlugin) {
return;
}
this.headerFilterPlugin.applyFilters();
},
toggleHeaderFilters: function () {
if (!this.headerFilterPlugin) {
return;
}
this.headerFilterPlugin.toggle(arguments);
}
});
},
toggle: function (state) {
var me = this;
state = state === undefined ? !me.rendered : !!state;
if (state !== me.rendered) {
this.renderFilters();
this.adjustFilterWidth();
this.grid.headerCt.doLayout();
} else {
this.clearFilters();
this.destroyFilters();
this.grid.headerCt.doLayout();
}
return me;
},
saveFilters: function (grid, status) {
status[this.statusProperty] = (this.stateful && this.rendered) ? this.parseFilters() : grid[this.statusProperty];
},
setFieldValue: function (field, value) {
var column = field.column;
if (!Ext.isEmpty(value)) {
field.setValue(value);
if (!Ext.isEmpty(value) && column.hideable && !column.isVisible() && !field.isDisabled() && this.ensureFilteredVisible) {
column.setVisible(true);
}
}
else {
field.setValue('');
}
},
renderFilters: function () {
this.destroyFilters();
this.fields = {};
this.containers = {};
var filters = this.grid.headerFilters;
/**
* @cfg {Boolean} ignoreSavedHeaderFilters
* <b>Configuration parameter for grid</b>
* Allows to ignore saved filter status when {@link #stateful} is enabled.
* This can be useful to use {@link #headerFilters} configuration directly and ignore status.
* The state will still be saved if {@link #stateful} is enabled.
*/
if (this.stateful && this.grid[this.statusProperty] && !this.grid.ignoreSavedHeaderFilters) {
Ext.apply(filters, this.grid[this.statusProperty]);
}
var storeFilters = this.parseStoreFilters();
filters = Ext.apply(storeFilters, filters);
var gridHeader = this.grid.headerCt;
var columns = gridHeader.getGridColumns();
for (var c = 0; c < columns.length; c++) {
var column = columns[c];
if (column.filter && column.rendered) {
var filterContainerConfig = {
itemId: column.id + '-filtersContainer',
cls: this.filterContainerCls,
layout: 'anchor',
_grid: this.grid,
bodyStyle: { 'background-color': 'transparent' },
border: false,
width: column.getWidth(),
listeners: {
scope: this,
keyup:{
element: 'el',
fn: function (e, textfield) {
this.delayedApplyFilter();
}
},
select: {
element: 'el',
fn: function (e) {
this.delayedApplyFilter();
}
}
},
items: []
}
var fca = [].concat(column.filter);
for (var ci = 0; ci < fca.length; ci++) {
var fc = Ext.clone(fca[ci]);
Ext.applyIf(fc, {
filterName: column.dataIndex,
fieldLabel: column.text || column.header,
hideLabel: fca.length == 1,
listeners: {
scope: this,
select: function (e) {
this.delayedApplyFilter();
},
change: function (dateRange, filter, event) {
this.delayedApplyFilter();
}
}
});
var initValue = Ext.isEmpty(filters[fc.filterName]) ? null : filters[fc.filterName];
Ext.apply(fc, {
cls: this.filterFieldCls,
itemId: fc.filterName,
anchor: '-1'
});
var filterField = Ext.ComponentManager.create(fc);
filterField.column = column;
this.setFieldValue(filterField, initValue);
this.fields[filterField.filterName] = filterField;
filterContainerConfig.items.push(filterField);
}
var filterContainer = Ext.create('Ext.container.Container', filterContainerConfig);
filterContainer.render(column.el);
this.containers[column.id] = filterContainer;
}
}
if (this.enableTooltip) {
this.tooltipTpl = new Ext.XTemplate(this.tooltipTpl, { text: this.bundle });
this.tooltip = Ext.create('Ext.tip.ToolTip', {
target: this.grid.headerCt.el,
//delegate: '.'+this.filterContainerCls,
renderTo: Ext.getBody(),
html: this.tooltipTpl.apply({ filters: [] })
});
this.grid.on('headerfilterchange', function (grid, filters) {
var sf = filters.filterBy(function (filt) {
return !Ext.isEmpty(filt.value);
});
this.tooltip.update(this.tooltipTpl.apply({ filters: sf.getRange() }));
}, this);
}
this.applyFilters();
this.rendered = true;
this.grid.fireEvent('headerfiltersrender', this.grid, this.fields, this.parseFilters());
},
delayedApplyFilter: function(){
this.delayedApplyFiltersTask.delay(200);
},
onStoreLoad: function () {
this.storeLoaded = true;
},
onFilterContainerEnter: function () {
this.applyFilters();
},
resizeFilterContainer: function (headerCt, column, w, opts) {
if (!this.containers) return;
var cnt = this.containers[column.id];
if (cnt) {
cnt.setWidth(w);
cnt.doLayout();
}
},
destroyFilters: function () {
this.rendered = false;
if (this.fields) {
for (var f in this.fields) {
Ext.destroy(this.fields[f]);
}
delete this.fields;
}
if (this.containers) {
for (var c in this.containers) {
Ext.destroy(this.containers[c]);
}
delete this.containers;
}
},
onDestroy: function () {
this.destroyFilters();
Ext.destroy(this.tooltip, this.tooltipTpl);
},
adjustFilterWidth: function () {
if (!this.containers) {
return;
}
var columns = this.grid.headerCt.getGridColumns();
for (var c = 0; c < columns.length; c++) {
var column = columns[c];
if(this.containers[column.id]){
this.containers[column.id].setWidth(column.getWidth());
}
//this.containers[column.id].setWidth(column.getWidth());
}
},
resetFilters: function () {
if (!this.fields) {
return;
}
for (var fn in this.fields) {
var f = this.fields[fn];
if (!f.isDisabled() && !f.readOnly && Ext.isFunction(f.reset)) {
f.reset();
}
}
this.applyFilters();
},
clearFilters: function () {
if (!this.fields) {
return;
}
for (var fn in this.fields) {
var f = this.fields[fn];
if (!f.isDisabled() && !f.readOnly) {
f.setValue('');
}
}
this.applyFilters();
},
setFilters: function (filters) {
if (!filters) {
return;
}
if (Ext.isArray(filters)) {
var conv = {};
Ext.each(filters, function (filter) {
if (filter.property) {
conv[filter.property] = filter.value;
}
});
filters = conv;
}
else if (!Ext.isObject(filters)) {
return;
}
this.initFilterFields(filters);
this.applyFilters();
},
getFilters: function () {
var filters = this.parseFilters();
var res = new Ext.util.MixedCollection();
for (var fn in filters) {
var value = filters[fn];
if (!value || value == '') {
continue;
}
var field = this.fields[fn];
res.add(new Ext.util.Filter({
property: fn,
value: value,
root: this.filterRoot,
label: field.fieldLabel
}));
}
return res;
},
parseFilters: function () {
var filters = {};
if (!this.fields) {
return filters;
}
for (var fn in this.fields) {
var field = this.fields[fn];
if (!field.isDisabled() && field.isValid())
filters[field.filterName] = field.getSubmitValue ? field.getSubmitValue() : field.getValue();
}
return filters;
},
initFilterFields: function (filters) {
if (!this.fields) {
return;
}
for (var fn in filters) {
var value = filters[fn];
var field = this.fields[fn];
if (field) {
this.setFieldValue(filterField, initValue);
}
}
},
countActiveFilters: function () {
var fv = this.parseFilters();
var af = 0;
for (var fn in fv) {
if (!Ext.isEmpty(fv[fn])) {
af++;
}
}
return af;
},
parseStoreFilters: function () {
var sf = this.grid.getStore().filters;
var res = {};
sf.each(function (filter) {
var name = filter.property;
var value = filter.value;
if (name && value) {
res[name] = value;
}
});
return res;
},
equalsFn: function(propertyName, filterValue){
return function (model) {
return model.get(propertyName) === filterValue;
}
},
equalsNumberFn:function(propertyName,filterValue){
return function (model) {
return model.get(propertyName) === Number(filterValue);
}
},
containsFn: function(propertyName, filterValue){
return function (model) {
return String(model.get(propertyName)).toUpperCase().indexOf(filterValue.toUpperCase()) > -1;
}
},
containsInManyFn: function (propertyName, filterValue) {
return function (model) {
return ("" + filterValue).toUpperCase().indexOf(String(model.get(propertyName)).toUpperCase()) > -1;
}
},
/*
filterValue is an array of two defining the bounds, all inclusive
*/
betweenFn: function (propertyName, filterValue) {
return function (model) {
var value = model.get(propertyName);
if (!(filterValue instanceof Array)) {
return true;
}
var start = filterValue[0];
var end = filterValue[1];
if (!start && !end) {
return true;
}
if (!value) {
return false;
}
if (start) {
if (start instanceof Date) {
if (value.getTime() < start.getTime()) {
return false;
}
} else {
if (value < start) {
return false;
}
}
}
if (end) {
if (end instanceof Date) {
if (value.getTime() > end.getTime()) {
return false;
}
} else {
if (value > end) {
return false;
}
}
}
return true;
}
},
applyFilters: function () {
var filters = this.parseFilters();
if (this.grid.fireEvent('beforeheaderfiltersapply', this.grid, filters, this.grid.getStore()) !== false) {
var storeFilters = this.grid.getStore().filters;
var change = false;
var active = 0;
for (var fn in filters) {
var value = filters[fn];
var sf = storeFilters.findBy(function (filter) {
return filter._property == fn;
});
if (Ext.isEmpty(value)) {
if (sf) {
storeFilters.remove(sf);
change = true;
}
}
else {
var field = this.fields[fn];
if (!sf || sf.value != filters[fn]) {
if (typeof (field.filterFn) == "string") {
var filterValue = filters[fn];
var filterFn = eval("new " + "this." + field.filterFn + "('" + fn + "', filterValue)");
var newSf = new Ext.util.Filter({
root: this.filterRoot,
property: fn,
value: filters[fn],
label: field.fieldLabel,
filterFn: filterFn
});
} else {
var newSf = new Ext.util.Filter({
root: this.filterRoot,
property: fn,
value: filters[fn],
label: field.fieldLabel
});
}
if (sf) {
storeFilters.remove(sf);
}
storeFilters.add(newSf);
change = true;
}
active++;
}
}
this.grid.fireEvent('headerfiltersapply', this.grid, filters, active, this.grid.getStore());
if (change) {
var curFilters = this.getFilters();
this.grid.fireEvent('headerfilterchange', this.grid, curFilters, this.lastApplyFilters, active, this.grid.getStore());
this.lastApplyFilters = curFilters;
}
}
},
reloadStore: function () {
var gs = this.grid.getStore();
if (this.grid.getStore().remoteFilter) {
if (this.storeLoaded) {
gs.currentPage = 1;
gs.load();
}
}
}
});
Ext.define('Ext.grid.ColumnComponentLayout.Override', {
override: 'Ext.grid.ColumnComponentLayout',
/**
* Don't recalculate the inner height when a filter config
* is applied to the column
*/
publishInnerHeight: function (ownerContext, outerHeight) {
if (this.owner.filter) {
return;
}
this.callParent(arguments);
}
});
Sencha Cmd v5.1.1.45 not able to handle override in same file
Aucun commentaire:
Enregistrer un commentaire