ExtJS - 带有 Ext.ux.grid.FilterRow 和 Ext.PagingToolbar 的 GridPanel答案

【问题标题】：ExtJS - GridPanel with Ext.ux.grid.FilterRow and Ext.PagingToolbarExtJS - 带有 Ext.ux.grid.FilterRow 和 Ext.PagingToolbar 的 GridPanel
【发布时间】：2010-09-09 17:27:49
【问题描述】：

我已经使用 PagingToolBar 将“FilterRow”插件添加到 GridPanel。除了这个问题之外，网格运行良好：如果我尝试对列进行排序或过滤，则网格会生成此 POST 变量 --> 排序、目录和启用的所有过滤器。相反，如果我尝试转到下一页，则此 POST 变量 --> 排序、目录、开始、限制。如果我尝试滚动页面，我会丢失之前发布的过滤器变量。这是我的代码：

Ext.onReady(function(){            

    var store = new Ext.data.JsonStore({
      url: "get-data-for-grid.php",
      root: "rows",
      id:'id',   
      totalProperty:'totalCount',      
      remoteSort: true,
      sortInfo: {
            field: 'genere',
            direction: 'ASC'
      },      
      autoDestroy: true,
      fields: [
         {name: 'scheda'},
         {name: 'topic'},
         {name: 'genere'},
         {name: 'specie'},
         {name: 'autore'},
         {name: 'comme'},
         {name: 'famiglia'},
         {name: 'nomecomune'},
         {name: 'datains'}
      ]
    });

    var filterRow = new Ext.ux.grid.FilterRow({
      autoFilter: false,
      listeners: {
        change: function(data) {
          store.load({
            params: data
          });
        }
      }
    });       

    // create the Grid
      var grid = new Ext.grid.GridPanel({
        store: store,
        loadMask: true,
        columns: [
            {id:'scheda', header: "Scheda", width: 73, align: 'center', sortable: false, renderer: scheda, dataIndex: 'scheda'},                    
            {id:'genere', header: "Genere", width: 130, renderer: gen, sortable: true, dataIndex: 'genere', filter:{ }},
            {id:'specie', header: "Specie", width: 150, sortable: true, renderer: spe, dataIndex: 'specie', filter:{ }},
            {id:'autore', header: "Autore", width: 150, sortable: true, renderer: all, dataIndex: 'autore', filter:{ }},
            {id:'famiglia', header: "Famiglia", width: 150, sortable: true, renderer: fam, dataIndex: 'famiglia', filter:{ }},
            {id:'nomecomune', header: "Nome Comune", width: 190, sortable: true, renderer: all, dataIndex: 'nomecomune', filter:{ }},
            {id:'datains', header: "Aggior.", width: 75, sortable: true, renderer: data, dataIndex: 'datains'}   
        ],
        highlightClasses: {
          ASC:  'x-custom-sort-asc'
          // DESC stays at default = x-ux-col-sort-desc
        },        
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store,
            displayInfo: true
        }),    
        plugins: [filterRow],

        height:660,
        width:1010,
        frame:true,                
        title:
        '<div align="center"><img src="images/testata_micologia.jpg" alt="" height="68" width="974" border="0"></div>',
        renderTo: "grid-example"
      });          

    grid.render('grid-example');

    store.load({params:{start:0, limit:15}});
});

“Ext.PagingToolbar”如何生成过滤器之前发布的 POST 变量（在我的示例中是genere、specie、autore、..）？

谢谢！

【问题讨论】：

标签： gridview extjs filtering

【解决方案1】：

为了保留您的过滤器参数，您必须使用 baseParams 属性而不是商店的 params 属性。

baseParams 属性将在所有对 load 方法的调用中保持不变。

所以我会在你的 FilterRow 的 change 监听器中实现这个：

    change: function(data) {
      Ext.apply(store.baseParams, data);
      store.load({params:{start:0, limit:15}});
    }

【讨论】：