我在面板中有一个网格和一个组合框。我试图根据组合框中的选择过滤网格中的数据。我正在使用 ExtJS 4.2.1
假设我有一个包含如下数据的网格：
在组合框中选择特定值时，我只希望这些值显示在网格中。
如果选择了“aaa”，那么我希望它显示为：
最初我使用 php 文件从数据库中加载网格的数据。
任何帮助将非常感激 ：）
PS：我不希望每次选择组合框项时都加载数据。我只是希望它被过滤。
问问题
4010 次
3 回答
5
首先，您需要一个组合框，它还允许您清除过滤器。因此，您将需要组合框上的第二个按钮，该按钮可让您清除过滤器是否处于活动状态。为此，您不需要做太多事情，因为框架已经涵盖了这样的功能，即使它没有记录在案。
这是一个旧版本，但它仍然可以在 4.2 上运行
Ext.define('Ext.ux.form.field.FilterCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.filtercombo',
/**
* @cfg {string} recordField
* @required
* The fieldname of the record that contains the filtervalue
*/
/**
* @cfg {string} searchField
* @required
* The fieldname on which the filter should be applied
*/
/**
* @cfg {boolean} clearable
* Indicates if the clear trigger should be hidden. Defaults to <tt>true</tt>.
*/
clearable: true,
initComponent: function () {
var me = this;
// never submit it
me.submitValue = false;
if (me.clearable)
me.trigger2Cls = 'x-form-clear-trigger';
else
delete me.onTrigger2Click;
me.addEvents(
/**
* @event clear
*
* @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event
*/
'clear',
/**
* @event beforefilter
*
* @param {Ext.ux.form.field.FilterCombo} FilterCombo The filtercombo that triggered the event
* @param {String/Number/Boolean/Float/Date} value The value to filter by
* @param {string} field The field to filter on
*/
'beforefilter'
);
me.callParent(arguments);
// fetch the id the save way
var ident = me.getId();
me.on('select', function (me, rec) {
var value = rec[0].data[me.recordField],
field = me.searchField;
me.fireEvent('beforefilter', me, value, field)
me.onShowClearTrigger(true);
me.onSearch(value, field);
}, me);
me.on('afterrender', function () { me.onShowClearTrigger(); }, me);
},
/**
* @abstract onSearch
* running a search on the store that may be removed separately
* @param {String/Number/Boolean/Float/Date} val The value to search for
* @param {String} field The name of the Field to search on
*/
onSearch: Ext.emptyFn,
/**
* @abstract onFilterRemove
* removing filters from the the
* @param {Boolean} silent Identifies if the filter should be removed without reloading the store
*/
onClear: Ext.emptyFn,
onShowClearTrigger: function (show) {
var me = this;
if (!me.clearable)
return;
show = (Ext.isBoolean(show)) ? show : false;
if (show) {
me.triggerEl.each(function (el, c, i) {
if (i === 1) {
el.setWidth(el.originWidth, false);
el.setVisible(true);
me.active = true;
}
});
} else {
me.triggerEl.each(function (el, c, i) {
if (i === 1) {
el.originWidth = el.getWidth();
el.setWidth(0, false);
el.setVisible(false);
me.active = false;
}
});
}
// Version specific methods
if (Ext.lastRegisteredVersion.shortVersion > 407) {
me.updateLayout();
} else {
me.updateEditState();
}
},
/**
* @override onTrigger2Click
* eventhandler
*/
onTrigger2Click: function (args) {
this.clear();
},
/**
* @private clear
* clears the current search
*/
clear: function () {
var me = this;
if (!me.clearable)
return;
me.onClear(false);
me.clearValue();
me.onShowClearTrigger(false);
me.fireEvent('clear', me);
}
});
现在您有了一个组合来触发过滤和清除事件，您需要实现它。为此，您需要知道不是网格过滤器或执行加载，而是存储。默认情况下，商店配置为
remoteSort: false,
remoteFilter: false,
remoteGroup: false
所以这是一个示例实现
{
xtype: 'filtercombo',
id: 'iccombo',
store: Ext.StoreMgr.lookup('Combostore'),
fieldLabel: 'Short State',
displayField: 'States',
valueField: 'States',
typeAhead: true,
triggerAction: 'all',
queryMode: 'remote',
name: 'State',
labelWidth: 125,
anchor: '95%',
recordField: 'ComboStoreFieldName',
searchField: 'GridStoreFieldName',
clearable: false,
onSearch: function (me, value, field) {
// You many also use component query to access your grid and call getStore()
var store = Ext.StoreMgr.lookup('YourStoreIdName');
// Clear existing filters
if (store.isFiltered()) {
store.clearFilter(false);
}
// Build filter
// Apply filter to store
store.filter(field,value);
}
}
于 2013-07-08T07:03:43.530 回答
0
在更改组合框值时，您可以使用您在网格中使用的存储过滤器方法。
store.clearFIlter();
store.filter('name', valueOfCombobox);
于 2013-07-08T06:55:25.263 回答
0
如果您想用多选组合替换网格列列表过滤器，请使用以下代码...
/**
* Filter by a configurable app.view.common.tag.Tag
* <p><b><u>Example Usage:</u></b></p>
* <pre><code>
var filters = Ext.create('Ext.ux.grid.GridFilters', {
...
filters: [{
// required configs
type : 'combofilter',
dataIndex : 'myName',
options : ['aa','bb']
// optional configs
allowBlank: false, //default is true
fieldLabel: "Tag(s)"
...
}]
});
* </code></pre>
*/
Ext.define('Ext.ux.grid.filter.ComboFilter', {
extend: 'Ext.ux.grid.filter.Filter',
alias: 'gridfilter.combofilter',
/**
* @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, {
allowBlank: true,
queryMode: 'local',
displayField : 'name',
valueField : 'id',
store: (config.options == null ? [] : config.options),
multiSelect: true,
typeAhead: true,
itemId: 'valuesSelect',
emptyText : 'Select',
labelWidth: 29,
fieldLabel: '',
width: 300,
listeners: {
scope: this,
//keyup: this.onInputKeyUp,
el: {
click: function(e) {
e.stopPropagation();
if (e.updateTask !== undefined) {
e.updateTask.delay(this.updateBuffer);
}
}
},
change: this.changeSelection
}
});
this.inputItem = Ext.create('app.view.common.tag.Tag', config);
this.menu.add(this.inputItem);
this.menu.showSeparator = false;
this.updateTask = Ext.create('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);
},
/**
* 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: 'list', 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 != 'list') {
return (this.getValue().length === 0);
}
return val.toLowerCase().indexOf(this.getValue().toLowerCase()) > -1;
},
changeSelection: function(field, newValue, oldValue) {
if (this.updateTask !== undefined) {
this.updateTask.delay(this.updateBuffer);
}
}
});
请使用 ExtJs 的 Tag 插件，您需要在 FiltersFeature 中添加 ComboFilter 文件。喜欢 ...
Ext.define('Ext.ux.grid.FiltersFeature', {
extend: 'Ext.grid.feature.Feature',
alias: 'feature.filters',
uses: [
'Ext.ux.grid.menu.ListMenu',
'Ext.ux.grid.menu.RangeMenu',
'Ext.ux.grid.filter.BooleanFilter',
'Ext.ux.grid.filter.DateFilter',
'Ext.ux.grid.filter.DateTimeFilter',
'Ext.ux.grid.filter.ListFilter',
'Ext.ux.grid.filter.NumericFilter',
'Ext.ux.grid.filter.StringFilter',
'Ext.ux.grid.filter.ComboFilter'
],
看起来像 ...
于 2016-02-24T13:06:38.387 回答