如何创建像JqGrid中的ExtJS Grid工具栏搜索
问题描述:
我刚开始在ExtJS Grid中潜水,我想创建一些工具栏搜索,如下面的JqGrid。网格将根据在该列中键入的键显示结果。 任何人都可以给我看演练吗?^_^ 在此先感谢您的任何答案。如何创建像JqGrid中的ExtJS Grid工具栏搜索
答
我做的方式是我添加了一个顶部工具栏到包含searchfields的GridPanel中。那么这只是将事件连接到回调的问题。
下面是ExtJS 3.x的一个例子。它是从我的项目中编辑出来的代码,所以我可能会剪掉太多,或者留下一些不需要的东西。特别参见buildTBar(),buildSearchBar()和attachListeners()方法。
Ext.ns('MyNs');
MyNs.GridPanel = Ext.extend(Ext.grid.GridPanel,{
initComponent: function() {
this.colModel = this.buildColModel();
this.store = this.buildStore();
this.tbar = this.buildTBar();
MyNs.GridPanel.superclass.initComponent.call(this);
this.attachListeners();
},
attachListeners: function() {
this.on('render', function() {
this.getPagingBar().bindStore(this.getStore());
this.getSearchBar().bindStore(this.getStore());
});
//I use this grid in a tab, so I defer loading until tab is activated
this.on('activate',function() {
var store = this.getStore();
if(store.getCount() == 0) {
store.load({
params: {
start: 0,
limit: 20
}
})
}
});
},
buildColModel: function() {
return new Ext.grid.ColumnModel({
columns: [
{header: 'Index', dataIndex: 'index'}
]
})
},
buildStore: function() {
//return a store
},
buildTBar: function() {
var items = new Array(
this.buildPagingBar(),
this.buildSearchBar()
)
return {
xtype: 'panel',
items: items
}
},
buildPagingBar: function() {
return {
xtype: 'paging',
pageSize: 20,
displayInfo: true,
displayMsg: 'Records{0} - {1} z {2}',
}
},
buildSearchBar: function() {
return {
xtype: 'toolbar',
itemId: 'searchBar',
items: [
{xtype: 'textfield', itemId: 'index'},
],
bindStore: function(store) { //here we bind grid's store to searchbar
this.store = store;
var me = this;
store.on('beforeload', function(store, options) {
options.params.index = me.find('itemId','index')[0].getValue();
})
Ext.each(this.findByType('textfield'),function(field) { //let's have store reloaded on field changes
field.on('change', function(field, newValue, oldValue) {
store.reload();
})
})
}
}
},
getPagingBar: function() {
return this.getTopToolbar().findByType('paging')[0];
},
getSearchBar: function() {
return this.getTopToolbar().find('itemId','searchBar')[0];
}
});