Question

i just start to dive in ExtJS Grid, I would like create some toolbar search like JqGrid below. Grid will show the result according to key typed in that column.
Can anyone show me the walkthrough ? ^_^
Thanks in advance for any answers.

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

Answer 1

The way I do it is I add a top toolbar to the gridpanel which contains searchfields. Then it’s just the matter of hooking up events to callbacks.

Below is an example for ExtJS 3.x. It’s edited out code from my project, so I might have cut out too much, or left something that’s not needed. See buildTBar(), buildSearchBar() and attachListeners() methods in particular.

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