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]; 
    } 
});