4
我在面板中有一個網格和一個組合框。我試圖根據組合框中的選擇過濾網格中的數據。我使用ExtJS的4.2.1使用組合框中的選定值過濾網格的數據
假設我有這樣的數據網格：
在選擇在組合框中選擇一個特定的值，我要顯示在網格中只有那些價值。
如果選擇「AAA」，那麼我希望它作爲顯示：
最初我是從數據庫中使用PHP文件加載網格的數據。
任何幫助將不勝感激:)
P.S. ：我不想每次選擇組合框項目時加載數據。我只是想要它被過濾。
A
回答
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);
}
}
+0
嗨sra，這是一個不錯的解決方案。但是如果我想通過在組合框中選擇「ALL」選項來顯示所有項目呢？過濾器將如何採取它？ – Harshrossi
+0
@Harshrossi Ju只需點擊'x'按鈕，該按鈕在應用過濾器並且所有過濾器被移除後立即出現，這意味着顯示所有記錄。此外，你可以檢查'所有'像'if（value =='All'）store.clearFilter（）;' – sra
+0
好吧，我現在得到它..酷！感謝一堆@sra :) – Harshrossi
0
關於更改combobox值，您可以使用您在網格中使用的商店過濾方法。
store.clearFIlter();
store.filter('name', valueOfCombobox);
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'
],
它看起來像......
相關問題
- 1. 使用flex中的組合框過濾數據網格
- 2. Flex：使用包含在數據域中的組合框過濾數據網格
- 3. extjs - 如何過濾除組合框中的選定值以外的網格數據
- 4. Extjs 6 - 與組合框過濾網格
- 5. 數據網格中的obout組合框
- 6. 在數據網格上使用數據綁定組合框
- 7. 綁定組合框在數據網格
- 8. 通過組合框1和組合框2的選定值來過濾組合框3
- 9. 根據組合框中的選定值篩選數據集
- 10. 如何根據組合框中的值填充數據網格
- 11. 在參數中綁定WPF數據網格中的組合框
- 12. 重複值計數在數據網格組合框的單值
- 13. 如何使用Telerik ComboBox的選定值過濾MVC Telerik網格？
- 14. 使用複選框組從mysql中過濾數據組
- 15. 在基於另一個組合框的數據網格中過濾組合框vb.net
- 16. 如何使用ag網格內置列過濾來過濾組合值
- 17. 使用wxpython填充組合框中的過濾選項
- 18. 使用C＃中組合框中的選定值傳遞參數
- 19. 數據綁定組合框中不同的值組合框
- 20. 數據網格值綁定到外部組合框
- 21. 如何綁定wpf數據網格中的組合框？
- 22. 無法綁定數據網格中的組合框
- 23. 按可用值過濾組合框
- 24. 使用datepickers過濾數據網格
- 25. C＃WinForms - 基於數據綁定datagridview中另一個組合框的值過濾一個組合框
- 26. Kendo Grid根據集合中的值過濾網格
- 27. 使用CodedUI在組合框或表格中選擇特定值
- 28. 在Access 2013中使用文本框值過濾組合框下拉選項
- 29. c＃中的組合框選定的值＃
- 30. 將數據網格模板列組合框的選定項綁定到數據網格文本列
我希望UR附件/截屏丟失，無法看到語句的輸出，「假設我有一個網格這樣的數據「和」如果「aaa」被選中，那麼我希望它顯示爲：「 – Hariharan
所有圖片都可見... – sra