EXT JS 4 Grid with Filter and Pagination

Question

I have a ext js grid with pagination and filtering on browser side. for example if there are 3 pages and i apply the filter to display last page records. Then it shows first and 2nd page blank and the filtered data is displayed on the last page. I have copied the code below for your reference. Can you please suggest what is wrong here?

<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>

Yilei Mou Yilei Mou · Accepted Answer · 2016-09-19T16:49:36

As your question, the issue caused because of your store has two limitation to display the data.

The first is coming from pagination, the pagination has the property defined for only display one page size data (in your case maximum 10). Because of pagination limitation, the filter function is only applied to 10 records under the current page.

The filter is another property for the store. If you did not manually remove it when you switch to another page, it will apply to every page. As your description, I believe in your page 1 and page 2 do not have any record meets your filter condition only page 3 has. That is the reason you can only see the record in page 3.

If you want to do filter for all the records (page 1 + 2 + 3) and show all the filtered records in page 1, you'd better to do the function through server side. Pass the filter condition to server, and get the filtered data back and load these data into the store.

Hope the answer could help. If you have any question, let me know.

EXT JS 4 Grid with Filter and Pagination

2 Answers