使用组合框中的选定值过滤网格的数据
我在面板中有一个网格和一个组合框。我试图根据组合框中的选择过滤网格中的数据。我正在使用ExtJS 4.2.1
假设我有一个包含这样数据的网格：
在组合框中选择特定值时，我只希望在网格中显示这些值。
如果选择“aaa”，那么我希望它显示为：
最初我使用php文件从数据库加载网格数据。
非常感谢任何帮助：）
P.S。 ：我不希望每次选择组合框项时都加载数据。我只是希望它被过滤。
3 个答案:
答案 0 :(得分：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);
}
}
答案 1 :(得分：0)
关于组合框值的更改，您可以使用在网格中使用的商店的过滤方法。
store.clearFIlter();
store.filter('name', valueOfCombobox);
答案 2 :(得分：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'
],
看起来像......
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？