Question

我刚刚开始在ExtJS Grid中潜水，我想在下面创建一些像JqGrid这样的工具栏搜索。网格将根据该列中键入的键显示结果。有人能告诉我演练吗？ ^ _ ^ 提前感谢您的任何答案。

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

Answer 1

我这样做的方法是将一个顶部工具栏添加到包含搜索字段的网格面板。然后，这只是将事件连接到回调的问题。

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

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

1 个答案: