Question

我在浏览器端有一个分页和过滤的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>

Answer 1

作为您的问题，由于您的商店而导致的问题有两个限制来显示数据。

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

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

如果要对所有记录（第1 + 2 + 3页）进行过滤并显示第1页中的所有过滤记录，则最好通过服务器端执行此功能。将过滤条件传递给服务器，然后获取过滤后的数据并将这些数据加载到商店中。

希望答案可以提供帮助。如果您有任何疑问，请与我联系。

Answer 2

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

plugins: [filters]

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

2 个答案: