JDKGridのような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]; 
    } 
});