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

[ZachG]

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:

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();
});

[evant]

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.

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();
});