如何创建像JqGrid中的ExtJS Grid工具栏搜索

Question

我刚开始在ExtJS Grid中潜水，我想创建一些工具栏搜索，如下面的JqGrid。网格将根据在该列中键入的键显示结果。 任何人都可以给我看演练吗？^_^ 在此先感谢您的任何答案。

jqgrid http://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-ash4/379109_10150531271858928_704228927_8868872_1607857946_n.jpg

Answer 1

我做的方式是我添加了一个顶部工具栏到包含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]; 
    } 
});