我刚开始深入ExtJS网格,我想创建一些工具栏搜索,比如下面的JqGrid。网格将根据该列中键入的键显示结果。有人能带我参观一下吗^_^提前感谢您的回答。
jqgridhttp://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/379109_10150531271858928_704228927_8868872_1607857946_n.jpg
我这样做的方法是在包含搜索字段的网格面板中添加一个顶部工具栏。然后就是将事件与回调挂钩的问题。
下面是ExtJS3.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];
}
});