Results 1 to 2 of 2

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

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    May 2009
    Posts
    158
    Vote Rating
    10
      0  

    Default [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
    18,583
    Vote Rating
    873
      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
    Twitter - @evantrimboli

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •