带有过滤器和分页的 EXT JS 4 网格答案

【问题标题】：EXT JS 4 Grid with Filter and Pagination带有过滤器和分页的 EXT JS 4 网格
【发布时间】：2021-06-17 19:46:52
【问题描述】：

我有一个 ext js 网格，在浏览器端具有分页和过滤功能。例如，如果有 3 页并且我应用过滤器来显示最后一页记录。然后它显示第一页和第二页空白，过滤后的数据显示在最后一页。我复制了下面的代码供您参考。你能建议这里有什么问题吗？

<script>
    Ext.Loader.setConfig({enabled: true});
    Ext.Loader.setPath('Ext.ux', '/extjs4/ux');

    Ext.require([
        'Ext.ux.grid.FiltersFeature'
    ]);

        Ext.Loader.setConfig({enabled: true});

        Ext.onReady(function() {

            Ext.QuickTips.init();
            Ext.tip.QuickTipManager.init();

            var data2='jsonData from Server';

            var mod2= Ext.define('Model', {

                extend: 'Ext.data.Model',
                fields: [ 
                    {name:'ID',mapping:'ID'}  ,
                    {name:'Creation Date/Time',mapping:'Creation Date/Time'} ,
                    {name:'Unit',mapping:'Unit'} 
                    ]        
            });

            var storeMain2 = Ext.create('Ext.data.Store', {
                model: mod2,
                autoLoad: false,
                buffered: false,
                pageSize: 10,
                data: Ext.decode(data2),
                proxy: {
                    type: 'pagingmemory',
                    reader: {
                        type: 'json',
                        root: 'user'
                        //totalProperty: 'totalCount'
                    }
                },
                remoteSort:true,
                remoteFilter:true,
                remoteGroup:true
            });

            var filters = {
                    ftype: 'filters',
                    autoReload: false,
                    encode: true,  
                    local: true   
                };

// grid with pagination
            var grid2 =  Ext.create('Ext.grid.Panel', {
                stateful: true,
                multiSelect: true,
                enableColumnMove:false,
                store:  storeMain2,
                stateId: 'stateGrid',
                autoHeight: true,
                autoWidth:  true,
                title: ' ',
                columnLines: true,
                renderTo: Ext.getBody(),
                features: [filters],
                filterable: true,

            columns: [
                    {
                        text     : 'ID',
                        sortable : true,
                        align:'center',
                        width:  70,
                        dataIndex: 'ID',
                        filter: { type: 'numeric'}
                    }, {
                        text     : 'Creation Date/Time',
                        width:  150,
                        sortable : true,
                        align:'center',
                        dataIndex: 'Creation Date/Time'
                    }, {
                        text     : 'Unit',
                        width:  150,
                        sortable : true,
                        align:'center',
                        dataIndex: 'Unit'
                    }
              ],
                listeners: {

                            'afterrender':function(e){
                                var gridthWidth = this.getWidth();
                                this.setWidth(gridthWidth);
                                this.setAutoScroll(true);
                            },
                            'columnresize': function(e){
                                var gridthWidth = this.getWidth();
                                this.setWidth(gridthWidth);
                                this.setAutoScroll(true);
                            } ,
                            render: function(e) {
                                this.store.on('load',function(){

                                });         
                            }
                        },
            bbar: Ext.create('Ext.PagingToolbar', {
                store: storeMain2,
                displayInfo: true,
                emptyMsg: "" 

            })        
        } );            
    });

</script>

【问题讨论】：

标签： extjs pagination grid filtering

【解决方案1】：

作为您的问题，由于您的商店引起的问题在显示数据方面有两个限制。

第一个来自分页，分页具有定义为仅显示一个页面大小数据的属性（在您的情况下最多为 10）。由于分页限制，过滤功能仅适用于当前页下的 10 条记录。

过滤器是商店的另一个属性。如果您在切换到另一个页面时没有手动删除它，它将应用于每个页面。正如你的描述，我相信你的第1页和第2页没有任何记录符合你的过滤条件只有第3页有。这就是您只能在第 3 页看到记录的原因。

如果你想对所有记录（第1页+2+3）进行过滤并在第1页显示所有过滤后的记录，你最好通过服务器端来做这个功能。将过滤条件传递给服务器，取回过滤后的数据并将这些数据加载到存储中。

希望答案能有所帮助。如果您有任何问题，请告诉我。

【讨论】：

【解决方案2】：

你必须让分页工具栏知道有过滤。将以下内容添加到 pagingToolbar 配置中（与您在 gridPanel 中所做的相同）：

plugins: [filters]

【讨论】：