Как создать панель инструментов ExtJS Grid, как в JqGrid

Question

Я только начал погружаться в ExtJS Grid, я хотел бы создать поиск на панели инструментов, например, JqGrid ниже.Сетка покажет результат в соответствии с ключом, введенным в этом столбце.Кто-нибудь может показать мне прохождение?^ _ ^ Заранее спасибо за ответы

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