如何像JqGrid中那样创建ExtJS网格工具栏搜索

How to create ExtJS Grid toolbar search like in JqGrid

本文关键字：ExtJS 网格 工具栏 搜索 创建 何像 JqGrid      更新时间：2023-09-26

我刚开始深入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];
  }
});
相关文章：