[2.x] Ext.ux.data.PagingStore [v0.4]

[hemvanh]

Thanks
Added lastOptions instead of baseParams
Could not getting paging to work onLoad
When I clicked the refresh button it worked to a degree but the first page had 6 records when I had this specified

lastOptions: {params:{start: 0,limit: 4}},

I uploaded the latest version to http://www.cramb.org.uk/extjs/paging/main.html

I also can not make the paging to work when the page loaded for the first time, any solution for this yet? or am i doing something wrong here :

LGjsonReader=new Ext.data.JsonReader({
root: 'rootLeague',
totalProperty:'totalCount',
id: 'ModuleId'
},[
{name: 'ModuleId'},
{name: 'ModuleName'},
{name: 'Selected'}
]);

.................

leagueStore = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({method:'post', url:'rManageOddsSel.aspx?m=league'+pars})
,sortInfo: {
field: 'Selected',
direction: "DESC"
}
, reader: LGjsonReader
,lastOptions: { params: { start: 0, limit: 12} }
});

LGcolModel = new Ext.grid.ColumnModel([
{id:"ModuleId", header: "ID", width: 100, dataIndex: 'ModuleId',hidden:true},
{header: "", width: 50, renderer:putLgCheckBox, dataIndex: 'Selected',align:'center'},
{header: "Module Name", width: 700, dataIndex: 'ModuleName'}
]);

........


},{
xtype: 'grid',
store: leagueStore,
colModel:LGcolModel,
height:500,
width:785,
title:'Select Leagues',
id:'lg_mt_Grid'
,bbar: new Ext.PagingToolbar({
pageSize: 12,
store: leagueStore
})

please help me

[hemvanh]

i got it from another thread

paging_store.load({params:{start:0, limit:5}});

http://extjs.com/forum/showthread.php?t=60757
everything's fine now

thanks alot

[whodat]

Hi Condor,

I'm trying to submit a form and load the PagingStore with the Records in the action.result.

The grid remains empty, but once I click the refresh button in the Toolbar, the grid loads properly.

I'm assuming I am not properly loading the store. Can you assist me?

               listeners: {
                   searchForResults: function(){
                        searchCriteriaPanel.getForm().submit({
                            url: '/TEST/employee_search.hra',
                            method: 'POST',
                            success: function(f, a){
                                //alert(a.result);
                                searchResultsGrid=createSearchResultGrid();
                                searchResultsGrid.getStore().loadData(a.result, true);  
                                searchResultsGrid.getStore().applyPaging();
                                searchResultsGrid.getStore().fireEvent('datachanged', searchResultsGrid.getStore());  
                                
                              
                            },
                            failure: function(f, a){
                                Ext.Msg.alert('Warning', a.failureType);
                            }
                        });      
                   },

[Condor]

Do you really want to append the records? Otherwise you can simply use:

searchResultsGrid.getStore().loadData(a.result[s]);

ps. You might need to reset paging to the first page before loading by changing lastOptions, e.g.

store.lastOptions.params = Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);

[whodat]

Do you really want to append the records? Otherwise you can simply use:

searchResultsGrid.getStore().loadData(a.result/*, true*/);
//searchResultsGrid.getStore().applyPaging();
//searchResultsGrid.getStore().fireEvent('datachanged', searchResultsGrid.getStore());

ps. You might need to reset paging to the first page before loading by changing lastOptions, e.g.

store.lastOptions = Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions);

Thanks Condor, I'll try it out as soon as I hit the office.. And no, I do not want to append, but I figured the first time it would not matter.

searchResultsGrid.getStore().loadData(a.result);
searchResultsGrid.getStore().lastOptions)= Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions);

[Condor]

The code I posted wasn't correct. It should have been:

if(searchResultsGrid.getStore().lastOptions){
    searchResultsGrid.getStore().lastOptions.params =
        Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
}
searchResultsGrid.getStore().loadData(a.result);

[whodat]

The code I posted wasn't correct. It should have been:

if(searchResultsGrid.getStore().lastOptions){
    searchResultsGrid.getStore().lastOptions.params =
        Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
}
searchResultsGrid.getStore().loadData(a.result);

I am getting the data back, but the it displays the whole data set instead of the page limit.

My data set size was 24 and my limit is 20.

[Condor]

Try this:

if(!searchResultsGrid.getStore().lastOptions){
    searchResultsGrid.getStore().lastOptions = {};
}
searchResultsGrid.getStore().lastOptions.params =
    Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
searchResultsGrid.getStore().loadData(a.result);

[whodat]

Try this:

if(!searchResultsGrid.getStore().lastOptions){
    searchResultsGrid.getStore().lastOptions = {};
}
searchResultsGrid.getStore().lastOptions.params =
    Ext.applyIf({start: 0, limit: pagingToolbar.pageSize}, store.lastOptions.params);
searchResultsGrid.getStore().loadData(a.result);

Condor, I looked at your code for the loadData method in the PagingStore class

loadData : function(o, append){
        this.isPaging(Ext.apply({}, this.lastOptions, this.baseParams));
        var r = this.reader.readRecords(o);
        this.loadRecords(r, {add: append}, true);
    }

I see that you are copying the the lastOptions and baseParams with Ext.apply so I added start and limit to the baseParams of my PagingStore instantiation and this has worked.

Is this an ok approach? If so, sorry for not posting that code...



My code as of now:
PagingStore creation

var pagingStore= new Ext.ux.data.PagingStore({
            baseParams: {
                start: 0,
                limit: 20
            },
            proxy:  new Ext.data.HttpProxy({url: '/HRA/employee_search.hra'}),
            reader: new Ext.data.JsonReader({totalProperty: 'resultSize', root: 'rows', id: 'employeeId'}, 
                ['employeeName', 'group', 'function', 'employeeId'])
           });

My form submit event

searchForResults: function(){
                        searchCriteriaPanel.getForm().submit({
                            url: '/HRA/employee_search.hra',
                            method: 'POST',
                            success: function(f, a){
                                searchResultsGrid=createSearchResultGrid();
                                
                                if(searchResultsGrid.getStore().lastOptions){
                                    searchResultsGrid.getStore().lastOptions.params =
                                        Ext.applyIf({start: 0, limit: 20}, searchResultsGrid.getStore().lastOptions.params);
                                }
                                searchResultsGrid.getStore().loadData(a.result, {start: 0, limit: 20});
                                var tabPanel=cardContainer.items.itemAt(0);
                                tabPanel.add(searchResultsGrid);
                                tabPanel.setActiveTab(searchResultsGrid);
                                tabPanel.doLayout();
                                cardContainer.doLayout();
                                viewport.doLayout();
                            },
                            failure: function(f, a){
                                Ext.Msg.alert('Warning', a.failureType);
                            }
                        });      
                   }

Also, when I submit the form again, would I have to delete the lastParams in order to get a fresh set of data? Or your piece of code which copies over the the original last options and that will fire the "datachanged" event?

if(searchResultsGrid.getStore().lastOptions){
                                    searchResultsGrid.getStore().lastOptions.params =
                                        Ext.applyIf({start: 0, limit: 20}, searchResultsGrid.getStore().lastOptions.params);
                                }

Thanks again for helping

[johnrembo]

That is something that is not properly handled by PagingStore.

Could you try if this fixes it:

Ext.override(Ext.ux.data.PagingStore, {
	loadRecords : function(o, options, success){
		if(!o || success === false){
			if(success !== false){
				this.fireEvent("load", this, [], options);
			}
			if(options.callback){
				options.callback.call(options.scope || this, [], options, false);
			}
			return;
		}
		var r = o.records, t = o.totalRecords || r.length;
		if(!options || options.add !== true){
			if(this.pruneModifiedRecords){
				this.modified = [];
			}
			for(var i = 0, len = r.length; i < len; i++){
				r[i].join(this);
			}
			if(this.allData){
				this.data = this.allData;
				delete this.allData;
			}
			if(this.snapshot){
				this.data = this.snapshot;
				delete this.snapshot;
			}
			this.data.clear();
			this.data.addAll(r);
			this.totalLength = t;
			this.applySort();
			if(!this.allData){
				this.applyPaging();
			}
			if(r.length != this.getCount()){
				r = [].concat(this.data.items);
			}
			this.fireEvent("datachanged", this);
		}else{
			this.totalLength = Math.max(t, this.data.length+r.length);
			this.add(r);
		}
		options[this.paramNames.start] = this.start;
		this.fireEvent("load", this, r, options);
		if(options.callback){
			options.callback.call(options.scope || this, r, options, true);
		}
	},
	applyPaging : function(){
		var start = this.start, limit = this.limit;
		if((typeof start == 'number') && (typeof limit == 'number')){
			var allData = this.data, data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey);
			if(start >= allData.getCount()){
				start = this.start = allData.getCount() ? Math.floor((allData.getCount() - 1) / limit) : 0;
			}
			data.items = allData.items.slice(start, start + limit);
			data.keys = allData.keys.slice(start, start + limit);
			var len = data.length = data.items.length;
			var map = {};
			for(var i = 0; i < len; i++){
				var item = data.items[i];
				map[data.getKey(item)] = item;
			}
			data.map = map;
			this.allData = allData;
			this.data = data;
		}
	}
});

store.applyPaging();
store.fireEvent('datachanged', store);

I can confirm your fix doesn't work for the paging toolbar.

Two problems I've noted while using store.filter:
1. Page count always keeps the same as well as total records count on the paging toolbar.
2. Store shows current empty page instead of navigating to 1st page (if I filter 1 record for example)

you fix seems to always show the same 1st page - nothing else.

maybe additional even - "filterapplied" should be implied somehow, because I'm not sure if filtering is similar to data-changing in this case?

any more solutions?