Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha Premium Member
    Join Date
    May 2009
    Posts
    157
    Vote Rating
    9
    ZachG will become famous soon enough

      0  

    Default [4.1.3] Memory Model in Filters Store with Paging Toolbar Goes Outside Bounds

    [4.1.3] Memory Model in Filters Store with Paging Toolbar Goes Outside Bounds


    REQUIRED INFORMATION




    Ext version tested:
    • Ext 4.1.3.584

    Browser versions tested against:
    • Chrome

    Description:
    • I have a store whose model is memory and has enablePaging:true.
    • The grid that uses the store has a paging toolbar, and can filter the store.
    • When I filter the store and go to the last page, it displays an empty page.
    • It should instead go to the last page that has data given the current filter.

    Steps to reproduce the problem:
    • Run the code below in the Paging Grid Example.
    • Click the "Filter by 1" button, then go to the last page using the paging toolbar.

    The result that was expected:
    • It would go to a page that had data.

    The result that occurs instead:
    • Nope

    Test Case:


    Code:
    Ext.onReady(function()	{
    	Ext.define("MyModel", {
    		extend:"Ext.data.Model",
    		fields:[
    			"value"
    		]
    	});
    	
    	var store, pagingToolbar;
    	
    	store = Ext.create("Ext.data.Store", {
    		proxy:{
    			type:"memory",
    			reader:"json",
    			enablePaging:true
    		},
    		model:"MyModel",
    		data:[
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			},
    			{
    				value:1
    			},
    			{
    				value:2
    			}
    		],
    		pageSize:3
    	});
    	
    	pagingToolbar = Ext.create("Ext.toolbar.Paging", {
    		dock:"bottom",
    		store:store,
    		displayInfo:true
    	});
    	
    	Ext.create("Ext.window.Window", {
    		width:500,
    		height:500,
    		layout:"fit",
    		items:[
    			{
    				xtype:"grid",
    				store:store,
    				columns:[
    					{
    						text:"Value",
    						dataIndex:"value"
    					}
    				],
    				dockedItems:[
    					{
    						xtype:"toolbar",
    						dock:"top",
    						items:[
    							{
    								text:"Filter by 1",
    								handler:function()	{
    									store.filter("value", "1");
    									pagingToolbar.moveFirst();
    								}
    							}
    						]
    					},
    					pagingToolbar
    				]
    			}
    		]
    	}).show();
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,856
    Vote Rating
    611
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    There's 2 problems with the test case:

    1) filter() can only filter what's active in the store at the current moment.
    2) When you filter, you're not changing the underlying data source (ie. the data on the proxy). It's not the responsibility of the store to modify the dataset coming from the proxy, rather, it's the other way around.

    As such, if you want to do local filtering with memory paging, you need to filter the dataset, not the store.

    Code:
    Ext.onReady(function() {
        Ext.define("MyModel", {
            extend: "Ext.data.Model",
            fields: ["value"]
        });
    
        var store, pagingToolbar;
    
        var initial = [{
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }, {
            value: 1
        }, {
            value: 2
        }];
    
        store = Ext.create("Ext.data.Store", {
            proxy: {
                type: "memory",
                reader: "json",
                enablePaging: true
            },
            model: "MyModel",
            data: initial,
            pageSize: 3
        });
    
        pagingToolbar = Ext.create("Ext.toolbar.Paging", {
            dock: "bottom",
            store: store,
            displayInfo: true
        });
    
        Ext.create("Ext.window.Window", {
            width: 500,
            height: 500,
            layout: "fit",
            items: [{
                xtype: "grid",
                store: store,
                columns: [{
                    text: "Value",
                    dataIndex: "value"
                }],
                dockedItems: [{
                    xtype: "toolbar",
                    dock: "top",
                    items: [{
                        text: "Filter by 1",
                        handler: function() {
                            var newData = [];
                            
                            Ext.Array.forEach(initial, function(item){
                                if (item.value === 1) {
                                    newData.push(item);
                                }
                            });
                            store.getProxy().data = newData;
                            pagingToolbar.moveFirst();
                        }
                    }, {
                        text: 'Clear',
                        handler: function() {
                            store.getProxy().data = initial;
                            pagingToolbar.moveFirst();
                        }
                    }]
                }, pagingToolbar]
            }]
        }).show();
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1