PDA

View Full Version : Ext.ux.data.PagingStore [v0.5]



Pages : [1] 2

Condor
16 Jun 2009, 11:37 AM
Ext 3 natively only supports remote paging (the server needs to process the start and limit parameters).

For local paging you can use the PagingMemoryProxy user extension, but it has some disadvantages:
1. You have to write extra code to remote load the data for the proxy.
2. query, filter and collect only work on the current page. You have to write extra code to use the PagingMemoryProxy filter support.
3. Local sorting works, but you need to set remoteSort:true. There is no remote sorting support.
4. Added and removed records are only remembered for the current page.
5. Changing the page is relatively slow (PagingMemoryProxy reprocesses all data).

All these problems can be solved by adding paging support to Store instead of MemoryProxy.

The Ext.ux.data.PagingStore class is a drop-in extension for the Ext.data.Store class. Local paging should work directly after replacing the reference to Store with PagingStore (there are also similar replacements for DirectStore, JsonStore, XmlStore and ArrayStore/SimpleStore).

Example of a remote store:

var store = new Ext.ux.data.PagingArrayStore({
fields: [...],
url: 'data.php',
autoLoad: {params: {start: 0, limit: 10}}
});

Example of a local store:

var store = new Ext.ux.data.PagingArrayStore({
fields: [...],
data: data,
lastOptions: {params: {start: 0, limit: 10}}
});

Just one note:
If you load a PagingStore it will ONLY request new data if any of the parameters (except start and limit) were changed from the previous load (otherwise it will just show a different page of the same data).
If you want to force a load you need to delete the lastParams property before loading the store.

Example: To make the refresh button of the paging toolbar do a forced reload you would need:

Ext.override(Ext.PagingToolbar, {
doRefresh: function(){
delete this.store.lastParams;
this.doLoad(this.cursor);
}
});
Note: In Ext 3.0 and 3.1 the doRefresh method is called 'refresh'.

Version history:
0.4:
- First release for Ext 3.0
0.4.1:
- Fixed destroy bug
- Last release for Ext 3.0 and 3.1
0.5:
- Only for Ext 3.2 (and up?).
- Added PagingGroupingStore (although I don't recommend using it).
- Added Ext.ux.PagingToolbar with doRefresh patch and support for adding/removing/clearing records.

The Ext 2.x version can be found here (http://www.extjs.com/forum/showthread.php?t=57386).

galdaka
16 Jun 2009, 12:00 PM
Ext 3.0 natively only supports remote paging (the server needs to process the start and limit parameters).
...

Hi,

And where is the code?

Greetings,

Condor
16 Jun 2009, 12:04 PM
Strange, my attachment must have gotten lost somewhere... I added it again.

markpele
20 Jun 2009, 12:08 AM
Why did you choose the name lastOptions? I would choose something like localLoad which is the local analog to autoLoad. I'm asking because your choice of this name probably means that it is not a simple local analog.

Is it possible to combine remote and local stores?
I'm trying to load large sets of data from a remote server - 100 records
and use local paging of small pages with 4 records.
At start the store will load the first 100 records. The user will be able to page and see records 1-4, 5-8...97-100 locally but if he'll ask for the 101s record the store will automatically load the next 100 records from the server. If we use caching moving from record 100 to 101 should feel smooth.

Condor
20 Jun 2009, 12:28 AM
1. lastOptions is not a property I created. It is already part of the current Store code and used to store the options used for the last load() call.

2. You would have to write some extra code for that.
- Detect if a load needs data that hasn't been loaded yet.
- Load the extra data using an Ajax request and create records from it using the reader.
- Join the records to the store and add them to allData.
- Apply paging and fire a datachanged event.

828
25 Jun 2009, 9:34 AM
Condor,

Getting "zip file currupt" when downloading.

Condor
25 Jun 2009, 12:01 PM
Internet Explorer can't be used to download forum attachments. Use any other browser (Firefox, Opera, Safari, Chrome etc.).

galdaka
25 Jun 2009, 11:00 PM
Condor,

Getting "zip file currupt" when downloading.

http://extjs.com/forum/showthread.php?p=342982#post342982

Greetings,

dhisnotnull
8 Jul 2009, 8:27 PM
this doesnt work in 3.0 Final


Ext.override(Ext.PagingToolbar, {
onRefreshClick: function(){
delete store.lastParams;
this.doLoad(this.cursor);
}
});

should be


Ext.override(Ext.PagingToolbar, {
refresh: function(){
delete this.store.lastParams;
this.doLoad(this.cursor);
}
});

Nice component by the way, helped me alot =D>.

Condor
8 Jul 2009, 8:44 PM
should be

Good catch. I adjusted the first post.

steffenk
9 Jul 2009, 2:56 PM
Hi Condor,

Many thanks for the Ext! This is exactly what i needed after struggling with huge xml file.

Here it's in action:
http://dev.sk-typo3.de/cetest/svn-log.html

dhisnotnull
9 Jul 2009, 4:11 PM
Good catch. I adjusted the first post.

You missed out the change from
onRefreshClick to
refresh

Ext.PagingToolbar doesnt have a onRefreshClick function.

I also found another bug,


destroy: function() {
if (this.storeId) {
Ext.PagingStoreMgr.unregister(this);
}
this.data = this.allData = this.snapshot = null;
Ext.destroy(this.proxy);
this.reader = this.writer = null;
this.purgeListeners();
},


should be



destroy: function() {
if (this.storeId) {
Ext.StoreMgr.unregister(this);
}
this.data = this.allData = this.snapshot = null;
Ext.destroy(this.proxy);
this.reader = this.writer = null;
this.purgeListeners();
},

Condor
9 Jul 2009, 11:24 PM
Both fixed.

lwexler
16 Jul 2009, 5:00 AM
Hi:

Are there any plans to make a grouping compatible version of this?

Or, any pointers on how you might go about providing client-side paging with/grouping?


Thanks,

Lee Wexler

lwexler
16 Jul 2009, 5:24 AM
Just saw your comment in the 2.0 thread, re: grouping. I will try it.

Sorry for the noise, and thanks for this!

imnilesh
29 Jul 2009, 11:29 PM
The Grouping Store variant worked for me as well with Ext-JS 3.0 PagingStore.



Ext.ux.data.PagingGroupingStore = Ext.extend(Ext.ux.data.PagingStore, {
remoteGroup: Ext.data.GroupingStore.prototype.remoteGroup,
groupOnSort: Ext.data.GroupingStore.prototype.groupOnSort,
clearGrouping: Ext.data.GroupingStore.prototype.clearGrouping,
groupBy: Ext.data.GroupingStore.prototype.groupBy,
applySort: Ext.data.GroupingStore.prototype.applySort,
applyGrouping: Ext.data.GroupingStore.prototype.applyGrouping,
getGroupState: Ext.data.GroupingStore.prototype.getGroupState
});

Thanks!

tomim
30 Jul 2009, 11:34 PM
This is great add-on. =D>

Thanx!!!

renoye
4 Aug 2009, 12:05 AM
I am using the newest PagingStore v0.4 and gridFilter 0.2.8. I have problems on the paging toolbar.

Two problems I've noted:
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)

Should I fire some event? where do I fire?

thanks

renoye
4 Aug 2009, 12:53 AM
let's say I have 3 total pages. Currently, I am in page 2.
I click the refresh button which I override

Ext.override(Ext.PagingToolbar, {
// private
refresh: function(){
this.store.loadData(newObj);
}
});

the grid reloads and show the correct records of the second page since i di not change the lastoptions.start and limit. However, the paging toolbar shows I am in page 1.

I must miss something between the page store and page toolbar. Can some one please help me. thx

Condor
4 Aug 2009, 2:30 AM
loadData will fire a load event without start and limit parameters, making the PagingToolbar think it is on the first page.

Instead of loadData try:

var r = store.reader.readRecords(data);
store.loadRecords(r, Ext.apply({}, store.lastOptions), true);

renoye
4 Aug 2009, 10:20 AM
loadData will fire a load event without start and limit parameters, making the PagingToolbar think it is on the first page.

Instead of loadData try:

var r = store.reader.readRecords(data);
store.loadRecords(r, Ext.apply({}, store.lastOptions), true);

thanks, this works fine.

here are the other problem that I came across.

I am using the newest PagingStore v0.4 and gridFilter 0.2.8. I have problems on the paging toolbar.

Three problems I've noticed after I did filtering:
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)
3. if a grid already have filters, pagingstores will display all records then immediately do filtering and display filtered records. so it displays twice and causes some flickering.

I looked code
filterby and clearfilter only fires datachange event. Should it also fire 'load' event to trigger the page toolbar?
And, loadRecords only do Sort not filter. Should it do both?

Thanks for helping. waiting for your answers.

Condor
4 Aug 2009, 10:57 AM
All the issues you found are not caused by the PagingStore, but are already part of Store.

Try adding the changes you are suggesting (they sound ok)...

renoye
4 Aug 2009, 2:17 PM
loadData will fire a load event without start and limit parameters, making the PagingToolbar think it is on the first page.

Instead of loadData try:

var r = store.reader.readRecords(data);
store.loadRecords(r, Ext.apply({}, store.lastOptions), true);


All the issues you found are not caused by the PagingStore, but are already part of Store.

Try adding the changes you are suggesting (they sound ok)...

hi, Condor, you are right. this is not the problem of pagingstore but the problem of store itself. I spent 1 hour to understand the code of store. it seems the creator intensionally seperate filtering from loadrecords. Do not know that is the same case in 2.2. However, I understand how pagingstore works much better. (trick is the allData)

I tried to add fire load event within filterBy. That does not work. It cause recursive error.

Finally, I found a solution. Proably, you won't like.

use the grid to listen filterupdate event, then make the pagebar.doLoad(0)

Ext.grid.GridPanel({
----
,listeners: {
---
,filterupdate: function() {
that.bbar.doLoad(0);
}
});

Condor
4 Aug 2009, 10:48 PM
You might also be interested in this feature request (http://extjs.com/forum/showthread.php?t=76029).

renoye
5 Aug 2009, 12:29 AM
condo:

I have looked your feature request. I want to confirm one thing.

If a store has a filter running already, now the store loads new data. After your change, the data store will run applyFilter twice. First in the loadRecords, second when filterBy being called. am i right?

thanks

Condor
5 Aug 2009, 12:38 AM
No, normally loadRecords wouldn't filter at all (no call to filterBy). I added the applyFilter call in there to filter the store before the bound components (grids etc.) are notified.

renoye
5 Aug 2009, 1:22 AM
No, normally loadRecords wouldn't filter at all (no call to filterBy). I added the applyFilter call in there to filter the store before the bound components (grids etc.) are notified.

currently, loadRecords of store do not call filtering at all. So if a store has a filter after loadRecords, which object (is that Grid) triggered filterby function? and how can you avoid those trigger. thanks for answering my question in advanced.

Condor
5 Aug 2009, 1:27 AM
Do you use some kind of filter plugin that could cause this?

renoye
5 Aug 2009, 1:57 AM
Do you use some kind of filter plugin that could cause this?

I am using Ext.ux.grid.GridFilters v0.2.8

Let me ask my question again. I know store has a filter method. However, none of the methods of store are calling filter method inclunding loadRecords. So this filter method must be called by bounded object. Most likely the grid object.
Am I right?

Condor
5 Aug 2009, 2:50 AM
As I suspected, it's cause by the GridFilters plugin (try configuring it with onLoad:Ext.emptyFn).

renoye
5 Aug 2009, 11:11 PM
I already put your feature request into PagingStore. It runs fine.

brizardh
21 Sep 2009, 12:14 PM
Hello,

I have some questions concerning the Paging Store whereas if some functionalities are available or not :

1 - Can it remember the states (cookie) - I.e the last page the user was on...? It also seems like if I put a filter in, it won't remember it ... is it normal? It does remember it when i dont use the PagingStore.

2 - When I filter the data, is it suppose to update the paginator's total pages accordingly? I need to hit refresh button in order to update the data - did i missed something?

3 - Also if i'm located on page 3 of 5 and I filter some data that only has few records (1 page), it leaves me on the 3rd page. Should it redirect me automatically on the 1st page?

4 - Using a PagingGroupingStore, if I select a header and click group by this field, i get an error of : "this.applyGroupField is not a function". If i click again, i get no errors, but it doesn't group by this field until I hit the refresh button of the paginator - Is it the same refresh problem of the filters?

Overall, I'm really impressed by this feature, it saves a lot of coding time - Many thanks!!!!!!

brizardh
24 Sep 2009, 7:56 AM
For point 2 :
I added

myGrid.on({ filterupdate: this.updatePaginator, afterrender: this.updatePaginator });

and

updatePaginator: function() {
// Used to update the paginator after the grid is loaded or filtered (if filters were still selected, normally it wont update the paginators values)
var updatePaginator = new Ext.util.DelayedTask(function() {
Ext.getCmp("myPagingToolBar").doLoad(0);
});
updatePaginator.delay(500);
},

Dont know if its the right way to do it, but that way it will call the update of the paginator after the filter was done, updating the records count and the page...

For point 3 :

var myBottomBar = new Ext.PagingToolbar({ // Optional
id: 'myPagingToolBar',
store: myStore,
plugins: [myFilters]
});



For point 4 :

Ext.ux.data.PagingGroupingStore = Ext.extend(Ext.ux.data.PagingStore, {
remoteGroup: Ext.data.GroupingStore.prototype.remoteGroup,
groupOnSort: Ext.data.GroupingStore.prototype.groupOnSort,
clearGrouping: Ext.data.GroupingStore.prototype.clearGrouping,
groupBy: Ext.data.GroupingStore.prototype.groupBy,
applyGroupField: Ext.data.GroupingStore.prototype.applyGroupField,
applySort: Ext.data.GroupingStore.prototype.applySort,
applyGrouping: Ext.data.GroupingStore.prototype.applyGrouping,
getGroupState: Ext.data.GroupingStore.prototype.getGroupState
});fixed my problem

ferryman
28 Sep 2009, 2:08 AM
Hi all
Use code:


var store = new Ext.ux.data.PagingArrayStore({
fields:[...],
url:'data.backend.php',
root:'rows',
totalProperty:'totalCount',
autoLoad:{params: {start: 0, limit: "set totalCount"}}
});
My English is not good(
How to get json response "totalCount" and set to parameter limit?

Json response:

{"totalCount":2,"rows":[{...},{...},{...}]}

Condor
28 Sep 2009, 2:39 AM
How to get json response "totalCount" and set to parameter limit?

Can you explain why you would want this?

ps. You don't really need a totalProperty in PagingStore.

ferryman
28 Sep 2009, 3:09 AM
In my application I have a function that allows user to skip through the rows of data by pressing "next" button. Right now every time when the user presses the button it fires a request that queries the database and fetches the next bit of data, which works fine but with some delays. So the solution that I want to implement is to fetch quite a considerable amount of data into array in one go and then feed it to user bit by bit when requested, this way the response time of the web site will be almost instant. Also I want to write a function that would wach the position of the pointer in this array and fetch more data from the database when it gets close to the end of the array.

Condor
28 Sep 2009, 3:43 AM
Yes, there are more people asking for this...

PagingStore isn't capable of doing this, so it would require extra coding on your part (you need to add the extra loaded data to the internal allData MixedCollection).

ferryman
28 Sep 2009, 3:53 AM
Im do it


var request = new Ext.data.JsonStore({
id:'getCount',
root:'totalCount',
url:'getCount.php',
fields:[{name:'total'}]
});

request.load();

request.on('load', function(request, record, options){

var store = new Ext.ux.data.PagingArrayStore({
fields:[...],
url:'data.backend.php',
root:'rows',
totalProperty:'totalCount',
autoLoad:{params: {start: 0, limit: request.totalLength}}
});


var pageToolBar = new Ext.PagingToolbar({
pageSize: request.totalLength,
store: store
});

...........

Mjollnir26
29 Sep 2009, 11:52 AM
Hello Condor,
just wanted to say thanks a real real real big bunch, for once more saving my Ass,
this time without even knowing it. Your Store is working like a Champ! :))

cwford
4 Oct 2009, 9:37 AM
Condor,

Just want to add my thanks to the rest for this extension. Really saved me a lot of time and grief. Nice job!

Dustin Graham
17 Oct 2009, 9:40 PM
Yes, there are more people asking for this...

PagingStore isn't capable of doing this, so it would require extra coding on your part (you need to add the extra loaded data to the internal allData MixedCollection).

First off: Condor, thanks for this awesome thread. :-)

So... While the paging example uses the forums and has 280,000+ results, they obviously should not all be sent to the client. So, remote paging is good.

But, I am wondering since this plugin is for a PagingStore... doesn't that mean that all the data is local?

So, in my case I have 10,000+ company records. I simply send all the records on the load() call and it results in a file that is ~500kb when zipped.

This data then resides in the datastore which I use across various forms and grids. I added the paging store so that the grid with the bufferview and pagingtoolbar shows only 250 records at a time.

It scrolls very fast, and paging is instant. I can click next/prev/last/first and near instantly I have my next set of 250 records in the grid.

My question: Is this the right way? I believe I will be expanding the number of variables in the data record as well as increase the number of company records, so my data will continue to grow. But, it seems like perhaps a one shot send at application load is the way to go. Maybe it takes 30 seconds or a minute to download 1Mb or 2Mb of data, but then it can be accessed rapidly using the PagingStore. Will that work?

Condor
18 Oct 2009, 3:01 AM
PagingStore loads all the data into memory. This means that it shouldn't be used when there is a lot of data, especially on old javascript engines (IE6/7). For big datasets, remote paging is the way to go.

tomcheng76
20 Oct 2009, 7:31 PM
great plugin, thanks.

Should this.allData/this.snapshot use insert (same as this.data) instead of addAll in the insert function?

As insert function is supplying an index argument and addAll just push them into the end of the array. Thanks! :)

Condor
20 Oct 2009, 10:19 PM
great plugin, thanks.

Should this.allData/this.snapshot use insert (same as this.data) instead of addAll in the insert function?

As insert function is supplying an index argument and addAll just push them into the end of the array. Thanks! :)

There is a discussion about this in a different thread. The problem is that the snapshot can contain a lot more data and the insert position is probably not the same.
I finally ended up just adding all the records, but I also proposed a solution where the records would be added after the record at the specified position.

ps. I agree with you on allData. There the index can be determined correctly (index = start + index).

tomcheng76
21 Oct 2009, 12:49 AM
There is a discussion about this in a different thread. The problem is that the snapshot can contain a lot more data and the insert position is probably not the same.
I finally ended up just adding all the records, but I also proposed a solution where the records would be added after the record at the specified position.

ps. I agree with you on allData. There the index can be determined correctly (index = start + index).

Would u mind pointing me to that thread?

Once more question. What is the usage of this.snapshot? Thanks in advance.

Condor
21 Oct 2009, 1:03 AM
This is one of the threads (http://www.extjs.com/forum/showthread.php?t=71521) I was talking about.

In a standard store the 'snapshot' contains all records and 'data' contains the filtered records.

In a PagingStore, 'snapshot' will contain all records, 'allData' contains the filtered records and 'data' contains the filtered and paged records.

tomcheng76
21 Oct 2009, 1:33 AM
This is one of the threads (http://www.extjs.com/forum/showthread.php?t=71521) I was talking about.

In a standard store the 'snapshot' contains all records and 'data' contains the filtered records.

In a PagingStore, 'snapshot' will contain all records, 'allData' contains the filtered records and 'data' contains the filtered and paged records.

Thanks. this is helpful.

wp.joju
22 Oct 2009, 2:23 AM
ok finally got it to work now... the current problem is that my grid is on a window with a card layout and each time i click on the paging toolbar's next or previous page,,, the wizard is going to the next step

tdteti_
23 Oct 2009, 1:04 AM
Hi Condor,
I am trying to download the "PagingStore3_v0.4.1.zip (http://www.extjs.com/forum/attachment.php?attachmentid=14876&d=1247210611)" attached file, and it seems is failing (Error message: Posible cause - File transfer error). Could you attach it again, please?

The case is that I am doing the same type of combo and my problem is the same (live-search). That search is only working over the current page to which the combobox is showing. It means, if I try to search a value to which is missing on the current page (although it exist dataset) that is not found and not filtered. I am seeing each time the paging (|<, < ,>, >|) buttons are pressed, the 'store' object is only loaded with the current page data and this is the reason the search only works over these data... I would need to solve it. It means, the search works over all dataset like with 'remote' (forum-search.js). Is that possible? Is there a solution through the information including in that file?

Thanks in advance for you help!
kind regards.

Condor
23 Oct 2009, 1:18 AM
Didn't you read the note? You can't download forum attachments using IE. You need to use a different browser.

tdteti_
23 Oct 2009, 1:47 AM
Sorry :"> !!
I have already downloaded it using 'Google Chrome'. I will try then with this!!

Thanks a lot Condor!! ;)

tdteti_
23 Oct 2009, 2:16 AM
Sorry again Condor but I am so new using ExtJs 3.0 library...:(
I have placed the "PagingStore.js" downloaded file inside a new folder:
"../ext-3.0.0/ux/data/PagingStore.js" since to "ux/data" path does not exist on ExtJs 3.0 library.
Then, on my code I have put it:
...
<script language="javascript" src="js/ext-3.0.0/ux/data/PagingStore.js" type="text/javascript"></script>
...
...
var countries = [
['ABW','ARUBA','ARUBA'],['AFG','AFGHANISTAN','AFGHANISTAN'],...
];

var store = new Ext.ux.data.PagingStore({
fields: [
{name: 'code',type:'string'},
{name: 'value',type:'string'},
{name: 'tooltip', type:'string'}
],
data: countries,
lastOptions: {params: {start: 0, limit: 5}}
});
...
...
Now it is not working... :(! I have put it correctly? How I must 'import' the "PagingStore.js" file and use it?
Thanks again for all your help!!

tomcheng76
23 Oct 2009, 2:17 AM
Is this better?


insert: function(index, records) {
//find reference for snapshot first
var refindex = -1, refrecord = null;
if (index > 0){
refindex = index - 1;
refrecord = this.data.itemAt(refindex);
}else if (index == 0){
refindex = 0;
refrecord = this.data.itemAt(refindex);
}
records = [].concat(records);
for (var i = 0, len = records.length; i < len; i++) {
this.data.insert(index, records[i]);
records[i].join(this);
}
if (this.allData) {
//this.allData.addAll(records);
for (var i = 0, len = records.length; i < len; i++) {
this.allData.insert(this.start + index, records[i]);
}
}
if (this.snapshot) {
refindex = this.snapshot.indexOf(refrecord);
if (refrecord != null && refindex != -1){
if (index > 0){
refindex++;
for (var i = 0, len = records.length; i < len; i++) {
this.snapshot.insert(refindex, records[i]);
}
}else if (index == 0){
for (var i = 0, len = records.length; i < len; i++) {
this.snapshot.insert(refindex, records[i]);
}
}
}else{
this.snapshot.addAll(records);
//for (var i = 0, len = records.length; i < len; i++) {
// this.snapshot.insert(0, records[i]);
//}
}
}
this.fireEvent("add", this, records, index);
},

Condor
23 Oct 2009, 2:48 AM
Or a bit shorter:

Ext.override(Ext.ux.data.PagingStore, {
insert: function(index, records) {
records = [].concat(records);
var i, len = records.length, ix;
for (i = 0; i < len; i++) {
this.data.insert(index, records[i]);
records[i].join(this);
}
if (this.allData) {
ix = (this.start || 0) + index;
for (i = 0; i < len; i++) {
this.allData.insert(ix, records[i]);
}
}
if (this.snapshot) {
ix = index ? this.snapshot.indexOf(this.data.getAt(index - 1)) + 1 : 0;
for (i = 0; i < len; i++) {
this.snapshot.insert(ix, records[i]);
}
}
this.fireEvent("add", this, records, index);
}
});

tdteti_
23 Oct 2009, 3:47 AM
Sorry by the annoyances! I found the problem (nothing to do with the path,...:">). Finally I created a " PagingArrayStore" after import the "PagingStore.js" correctly and now it is working properly!! Thanks ;)...

Only one more thing, please: The only point to which it seems is failing (or better, it is not working as expected) is that after the filter, the total pages number is not updated (refreshed) until the next page button is pressed.
Example: The data are the all countries = 206 items. Due to the pageSize es equals to 5, I have (initially) total pages = 42 --> CORRRECT!!
The issue is that after I type (i.e) the letter 'S' to filter the countries, the query and filter are working correctly, but the total pages indicated on toolbar continue being 42, ONLY after presses the '>' button (i.e) that number is refreshed with the correct number of pages for the countries starting with 'S', it means 5 pages due to I have 25 countries starting with 'S' (pageSize = 5).
Then, there is some way to overwrite the Keypress event in order to trigger the refresh event after the query and filter are executed?

Thanks again for all!!

Condor
23 Oct 2009, 3:56 AM
That's a problem of PagingToolbar, not of Store.

You could try this patch (http://www.extjs.com/forum/showthread.php?p=395032#post395032).

tdteti_
23 Oct 2009, 4:28 AM
Hi Condor,
I have put it the patch and it is now working perfectly!!!=D>
Thanks a lot for your help!!!!=;

Animal
23 Oct 2009, 11:51 AM
How do I use it?

I want to load all the data. So start and l limit are irrelevant - the DB will return the full dataset.

And then I want it to page 10 by 10 from the loaded data.

It's actually making an HTTP request for each page.

Animal
23 Oct 2009, 11:53 AM
Oops. Hang on, I changed the wrong Store

Animal
23 Oct 2009, 11:54 AM
Of course it works fine when I change the right Store to be a Ext.ux.data.PagingStore!

tdteti_
26 Oct 2009, 6:27 AM
Hi all again! Today I have been re-testing my local paging combo and I have seen that there is a point to which it seems is not working as expected...
The case is that if I type any character/s on the combo after the page where is my combo is opened, it is working properly, the values are filtered and the paginator's 'total pages' number is updated (refreshed) correctly.
But the problem that if once the page is loaded, if i press (i.e.) the "last page" (>|) button, the items are shown correctly, but if after that, I type any character/s, the filter is not working, the possible items are not shown although they are existing on dataset and in addition they where filtered correctly the first time (without presses the paging button/s).
Could someone help me? What is the reason that the filter is only working if the paging toolbar button have not been pressed? It means, if I paginate, and, after that, I try to filter, the filter is not working anymore :(
I will attach my code for further information:

var store = new Ext.ux.data.PagingArrayStore({
fields: [
{name: 'code',type:'string'},
{name: 'value',type:'string'},
{name: 'tooltip', type:'string'}
],
data: countries,
lastOptions: {
params: {
start: 0,
limit: 5
}
}
});

var combo = new Ext.form.ComboBox({
tpl: '<tpl for="."><div ext:qtip="{tooltip}" class="x-combo-list-item">{value}</div></tpl>',
pageSize: 5,
width: 225,
store: store,
displayField:'value',
id: 'countryDropDown',
forceSelection: true,
mode: 'local',
triggerAction: 'all',
emptyText:'[Select]',
applyTo: 'search_ComboBox'
});

Thanks in advance for your full help!!

Condor
26 Oct 2009, 7:45 AM
Your explanation isn't completely clear, but I do know that there is another thing wrong with PagingToolbar:
If filtering lowers the number of records below the currently displayed page the pagingtoolbar gets confused.

You could probably solve this reloading the store with cursor=0 when a datachanged event is received (needs to be defered, otherwise it will break store processing).

tdteti_
26 Oct 2009, 8:20 AM
Sorry Condor, maybe my explanation is not so clear...:">

The problem to which I am having, is that the filter is only working if I am on the first page.

I have 21 pages with 5 items on each page. If I paginate (i.e.) from page 1 until page 15 and then I type any character/s, the filter does not work (no items shown) on combobox.
Then, If I press the "first page" button (|<), once I am on the 1st page, then I type any character/s (i.e. the same as typed on page 15) and now the filter is working perfectly.

The problem is that the filter is only working if I am on the first page, it means, If no pagination buttons are pressed. When I am on a page to which is not the first one, the filter does not work (no items shown after type).

Thanks a lot again Condor!!:)

Condor
26 Oct 2009, 8:27 AM
Yes, that's the problem I described.

1. Go to page 15 (shows records 71-75)
2. Filter the records (e.g. 10 remaining)
3. Page 15 shows as blank (technically correct)
4. Go to page 1 (shows records 1-5)

Filtering (and probably sorting too) should reset the page to 1.

tdteti_
27 Oct 2009, 4:25 AM
Hi Condor,
after your comments: "...reloading the store with cursor=0 when a datachanged event is received", I have coded the following:

this.combo.store.on('datachanged', function(){
this.combo.store.cursor = 0;
this.combo.store.reload(this.combo.store.cursor);
});

After that, it continues failing. In addition, now (with this code added) it does not updates the paginator's 'total pages' number (this case it was solved the last week adding your 'Patch' to override the 'store' and the 'pagingToolbar' objects).

Could you check if this last code is correct and it reflects the changes to which you are explaining, please?

Thanks a lot for your help!!!

allenlako
28 Oct 2009, 10:09 AM
Hi Condor,

I am trying to use your plug-in with an editable grid that uses CRUD. I was able to get my grid to present data using a normal data.Store, but wanted to add in some paging with memory. When I flipped my data.Store to your PagingArrayStore, all I get is an exception thrown. Can you see anything wrong with my code? I get back a 200 ok and the json array passed back matches the reader specification just fine. Like I said, it works perfectly with a simple data.Store, but for some reason the data won't load for your plugin.


var proxy = new Ext.data.HttpProxy({
url: 'data.php?store=rooms'
});

var readercols = [{name: 'room_nbr'},
{name: 'room_nbr_suffix'},{name:'room_name'},
{name: 'room_use_code'},{name: 'room_use_suffix'},
{name: 'stations'},{name: 'assignable_area'},
{name: 'program1'},{name: 'category1'},
{name: 'proration1'},{name: 'program2'},
{name: 'category2'},{name: 'proration2'},
{name: 'program3'},{name: 'category3'},
{name: 'proration3'},{name: 'program4'},
{name: 'category4'},{name: 'proration4'},
{name: 'inst_data'},{name: 'accessibility'},
{name: 'lastyear_update'},{name: 'update_username'},
{name: 'update_timestamp'},{name: 'room_id'}];

var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
});

var store = new Ext.ux.data.PagingArrayStore({
id: 'tblstore',
proxy: proxy,
writer: writer,
autoSave: false,
autoLoad: false,
reader: new Ext.data.JsonReader({successProperty:'success',idProperty:'room_id',root:'data'},readercols)
});

var mybld = 00001;
store.proxy.setUrl('data.php?store=rooms&bldg=' + mybld,true);

var tblColumns = [
{header: "Room Nbr", width: 60, sortable: true, dataIndex: 'room_nbr',
editor: new Ext.form.TextField({allowBlank: false, maxLength:5})},
{header: "Room Nbr Suffix", width: 90, sortable: true, dataIndex: 'room_nbr_suffix',editor: sufBox_room,
renderer: Ext.ux.comboBoxRenderer(sufBox_room)},
{header: "Room Name", width: 130, sortable: true, dataIndex: 'room_name',
editor: new Ext.form.TextField()},
{header: "Room Use Code", width: 100, sortable: true, dataIndex: 'room_use_code', editor: roomuse,
renderer: Ext.ux.comboBoxRenderer(roomuse)},
{header: "Room Use Suffix", width: 90, sortable: true, dataIndex: 'room_use_suffix', editor: sufBox_roomuse,
renderer: Ext.ux.comboBoxRenderer(sufBox_roomuse)},
{header: "Stations", width: 50, sortable: true, dataIndex: 'stations',
editor: new Ext.form.NumberField({maxLength:4})},
{header: "Assignable Area", width: 90, sortable: true, dataIndex: 'assignable_area',
editor: new Ext.form.NumberField({allowBlank: false,maxLength:6})},
{header: "Program1", width: 100, sortable: true, dataIndex: 'program1', editor: prog1,
renderer: Ext.ux.comboBoxRenderer(prog1)},
{header: "Category1", width: 100, sortable: true, dataIndex: 'category1', editor: cat1,
renderer: Ext.ux.comboBoxRenderer(cat1)},
{header: "Proration1", width: 75, sortable: true, dataIndex: 'proration1',
editor: new Ext.form.NumberField({maxLength:2})},
{header: "Program2", width: 100, sortable: true, dataIndex: 'program2', editor: prog2,
renderer: Ext.ux.comboBoxRenderer(prog2)},
{header: "Category2", width: 100, sortable: true, dataIndex: 'category2', editor: cat2,
renderer: Ext.ux.comboBoxRenderer(cat2)},
{header: "Proration2", width: 75, sortable: true, dataIndex: 'proration2',
editor: new Ext.form.NumberField({maxLength:2})},
{header: "Program3", width: 75, sortable: true, dataIndex: 'program3', editor: prog3,
renderer: Ext.ux.comboBoxRenderer(prog3)},
{header: "Category3", width: 75, sortable: true, dataIndex: 'category3', editor: cat3,
renderer: Ext.ux.comboBoxRenderer(cat3)},
{header: "Proration3", width: 75, sortable: true, dataIndex: 'proration3',
editor: new Ext.form.NumberField({maxLength:2})},
{header: "Program4", width: 75, sortable: true, dataIndex: 'program4', editor: prog4,
renderer: Ext.ux.comboBoxRenderer(prog4)},
{header: "Category4", width: 75, sortable: true, dataIndex: 'category4', editor: cat4,
renderer: Ext.ux.comboBoxRenderer(cat4)},
{header: "Proration4", width: 75, sortable: true, dataIndex: 'proration4',
editor: new Ext.form.NumberField({maxLength:2})},
{header: "Inst Data", width: 75, sortable: true, dataIndex: 'inst_data',
editor: new Ext.form.TextField()},
{header: "Accessibility", width: 75, sortable: true, dataIndex: 'accessibility', editor: access,
renderer: Ext.ux.comboBoxRenderer(access)},
{header: "Last Year Update", width: 90, sortable: true, dataIndex: 'lastyear_update',
editor: new Ext.form.NumberField({allowBlank: false,maxLength:4})},
{header: "Update Username", width: 100, sortable: true, editable: false, dataIndex: 'update_username',
editor: new Ext.form.TextField()},
{header: "Update Timestamp", width: 100, sortable: true, editable: false, dataIndex: 'update_timestamp',
editor: new Ext.form.TextField()}
];
store.load({params: {start: 0, limit: 250}});

var grid = new Ext.grid.EditorGridPanel({
id:'grid',
store: store,
columns: tblColumns,
height: 400,
stripeRows: true,
anchor: '100% 100%',
tbar:[{
text: 'Add',
iconCls: 'add',
handler: function(){
var u = new grid.store.recordType({
'Room Id':'',
'Room Nbr': '',
'Room Nbr Suffix': '',
'Room Name': '',
'Room Use Code': '',
'Room Use Suffix': '',
Stations: '',
'Assignable Area': '',
Program1: '',
Category1: '',
Proration1: '',
Program2: '',
Category2: '',
Proration2: '',
Program3: '',
Category3: '',
Proration3: '',
Program4: '',
Category4: '',
Proration4: '',
'Inst Data': '',
Accessibility: '',
'Last Year Update': '',
'Update Username': '',
'Update Timestamp': ''
});
grid.stopEditing();
grid.store.insert(0, u);
grid.startEditing(0, 0);
},
scope: this
}, '-'
,'->','-',{text: 'Save',
iconCls: 'save',
handler: function(){
store.save();
},
scope: grid
}
],
bbar: new Ext.PagingToolbar({
store: store,
displayInfo: true,
pageSize: 250
}),
listeners: {cellclick: function(g, r, c, e){
if(g.getColumnModel().getDataIndex(c) == 'room_type'){
//to do
}
}}
});
gridPanel.add(grid);
grid.getStore().on('exception', function(dp, type, action, options, response){
gridPanel.removeAll();
if (type == "remote") {
Ext.MessageBox.alert("Error", response.errors.reason);
} else {
Ext.MessageBox.alert("Warning", "Can't load data");
}


var grid = new Ext.form.Label({
id : 'grid',
html :"<div style='font-size:16px; color:red; text-align:center;'>NO DATA FOUND</div>",
anchor : '100%'
});
gridPanel.add(grid);
gridPanel.doLayout();
Ext.getBody().unmask();

});
gridPanel.doLayout();
Ext.getBody().unmask();
grid.relayEvents(grid.store,['update','destroy','save']);
}

hello
28 Oct 2009, 2:09 PM
I am trying to use PagingXmlStore to load an xml file, but it's not getting the data.

// create the Data Store
var store = new Ext.ux.data.PagingXmlStore({
// load using file
url: 'messages.xml',
lastOptions: {
params: {
start: 0,
limit: 5
}
},
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'message',
id: 'id',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'title', mapping: 'message-title'},
{name: 'date', mapping: 'message-sent', type: 'date', dateFormat: 'c'},
{name: 'type', mapping:'user-id'},
{name: 'content', mapping:'message-content'}
])
});//store
console.log(store.data); //prints data as [] of zero length

Condor
29 Oct 2009, 12:10 AM
1. Read the first post again. For a remote store you need to specify 'autoLoad' instead of 'lastOptions'.
2. Loading is asynchronous. You can only check the result in the load event and not directly after creating the store.
3. You don't need a PagingXmlStore if you specify a reader (use a normal PagingStore instead).

allenlako
29 Oct 2009, 5:04 AM
Hi Condor,

I have a working example of an EditorGridPanel using CRUD and an HTTPProxy. This working example used a regular data.Store and I could get it to work. I wanted to add in paging and memory so I tried your plugin but was not able to get it to work. After I switch from the data.Store to the PagingStore, everything works fine until the point of loading the data into the grid. I recieve a 200 ok status and the json passed back matches the reader, however the store continues to throw and exception response. Can you tell me if there is anything wrong in the code below? Thanks for any help.



var proxy = new Ext.data.HttpProxy({
url: 'data.php?store=rooms'
});

var readercols = [{name: 'room_nbr'},
{name: 'room_nbr_suffix'},{name:'room_name'},
{name: 'room_use_code'},{name: 'room_use_suffix'},
{name: 'stations'},{name: 'assignable_area'},
{name: 'program1'},{name: 'category1'},
{name: 'proration1'},{name: 'program2'},
{name: 'category2'},{name: 'proration2'},
{name: 'program3'},{name: 'category3'},
{name: 'proration3'},{name: 'program4'},
{name: 'category4'},{name: 'proration4'},
{name: 'inst_data'},{name: 'accessibility'},
{name: 'lastyear_update'},{name: 'update_username'},
{name: 'update_timestamp'},{name: 'room_id'}];

var writer = new Ext.data.JsonWriter({
encode: true,
writeAllFields: true
});

var store = new Ext.ux.data.PagingArrayStore({
id: 'tblstore',
proxy: proxy,
writer: writer,
autoSave: false,
autoLoad: false,
reader: new Ext.data.JsonReader({successProperty:'success',idProperty:'room_id',root:'data'},readercols)
});

var mybld = '00100';
store.proxy.setUrl('data.php?store=rooms&bldg=' + mybld,true);

var tblColumns = [
{header: "Room Nbr", width: 60, sortable: true, dataIndex: 'room_nbr',
editor: new Ext.form.TextField({allowBlank: false, maxLength:5,})},
{header: "Room Nbr Suffix", width: 90, sortable: true, dataIndex: 'room_nbr_suffix',editor: sufBox_room,
renderer: Ext.ux.comboBoxRenderer(sufBox_room)},
{header: "Room Name", width: 130, sortable: true, dataIndex: 'room_name',
editor: new Ext.form.TextField()},
{header: "Room Use Code", width: 100, sortable: true, dataIndex: 'room_use_code', editor: roomuse,
renderer: Ext.ux.comboBoxRenderer(roomuse)},
{header: "Room Use Suffix", width: 90, sortable: true, dataIndex: 'room_use_suffix', editor: sufBox_roomuse,
renderer: Ext.ux.comboBoxRenderer(sufBox_roomuse)},
{header: "Stations", width: 50, sortable: true, dataIndex: 'stations',
editor: new Ext.form.NumberField({maxLength:4})},
{header: "Assignable Area", width: 90, sortable: true, dataIndex: 'assignable_area',
editor: new Ext.form.TextField({allowBlank: false,maxLength:6,validator:function(val){return isNumeric(val);}})},
{header: "Program1", width: 100, sortable: true, dataIndex: 'program1', editor: prog1,
renderer: Ext.ux.comboBoxRenderer(prog1)},
{header: "Category1", width: 100, sortable: true, dataIndex: 'category1', editor: cat1,
renderer: Ext.ux.comboBoxRenderer(cat1)},
{header: "Proration1", width: 75, sortable: true, dataIndex: 'proration1',
editor: new Ext.form.TextField({maxLength:2,validator:function(val){return isNumeric(val);}})},
{header: "Program2", width: 100, sortable: true, dataIndex: 'program2', editor: prog2,
renderer: Ext.ux.comboBoxRenderer(prog2)},
{header: "Category2", width: 100, sortable: true, dataIndex: 'category2', editor: cat2,
renderer: Ext.ux.comboBoxRenderer(cat2)},
{header: "Proration2", width: 75, sortable: true, dataIndex: 'proration2',
editor: new Ext.form.TextField({maxLength:2,validator:function(val){return isNumeric(val);}})},
{header: "Program3", width: 75, sortable: true, dataIndex: 'program3', editor: prog3,
renderer: Ext.ux.comboBoxRenderer(prog3)},
{header: "Category3", width: 75, sortable: true, dataIndex: 'category3', editor: cat3,
renderer: Ext.ux.comboBoxRenderer(cat3)},
{header: "Proration3", width: 75, sortable: true, dataIndex: 'proration3',
editor: new Ext.form.TextField({maxLength:2,validator:function(val){return isNumeric(val);}})},
{header: "Program4", width: 75, sortable: true, dataIndex: 'program4', editor: prog4,
renderer: Ext.ux.comboBoxRenderer(prog4)},
{header: "Category4", width: 75, sortable: true, dataIndex: 'category4', editor: cat4,
renderer: Ext.ux.comboBoxRenderer(cat4)},
{header: "Proration4", width: 75, sortable: true, dataIndex: 'proration4',
editor: new Ext.form.TextField({maxLength:2,validator:function(val){return isNumeric(val);}})},
{header: "Inst Data", width: 75, sortable: true, dataIndex: 'inst_data',
editor: new Ext.form.TextField()},
{header: "Accessibility", width: 75, sortable: true, dataIndex: 'accessibility', editor: access,
renderer: Ext.ux.comboBoxRenderer(access)},
{header: "Last Year Update", width: 90, sortable: true, dataIndex: 'lastyear_update',
editor: new Ext.form.NumberField({allowBlank: false,maxLength:4})},
{header: "Update Username", width: 100, sortable: true, editable: false, dataIndex: 'update_username',
editor: new Ext.form.TextField()},
{header: "Update Timestamp", width: 100, sortable: true, editable: false, dataIndex: 'update_timestamp',
editor: new Ext.form.TextField()}
];
store.load({params: {start: 0, limit: 250}});

var grid = new Ext.grid.EditorGridPanel({
id:'grid',
store: store,
columns: tblColumns,
height: 400,
stripeRows: true,
anchor: '100% 100%',
tbar:[{
text: 'Add',
iconCls: 'add',
handler: function(){
var u = new grid.store.recordType({
'Room Id':'',
'Room Nbr': '',
'Room Nbr Suffix': '',
'Room Name': '',
'Room Use Code': '',
'Room Use Suffix': '',
Stations: '',
'Assignable Area': '',
Program1: '',
Category1: '',
Proration1: '',
Program2: '',
Category2: '',
Proration2: '',
Program3: '',
Category3: '',
Proration3: '',
Program4: '',
Category4: '',
Proration4: '',
'Inst Data': '',
Accessibility: '',
'Last Year Update': '',
'Update Username': '',
'Update Timestamp': ''
});
grid.stopEditing();
grid.store.insert(0, u);
grid.startEditing(0, 0);
},
scope: this
}, '-'
<?php if(in_array("Facility Manager",$secgrps) || in_array("Building Manager",$secgrps)){
echo ", {
text: 'Delete',
iconCls: 'delete',
handler: function(){
var index = grid.getSelectionModel().getSelectedCell();
if (!index) {
return false;
}
var rec = grid.store.getAt(index[0]);
grid.store.remove(rec);
},
scope: this
}, '-'";}
?>
,'->','-',{text: 'Save',
iconCls: 'save',
handler: function(){
store.save();
},
scope: grid
}
],
bbar: new Ext.PagingToolbar({
store: store,
displayInfo: true,
pageSize: 250
})
});
gridPanel.add(grid);
grid.getStore().on('exception', function(dp, type, action, options, response){
gridPanel.removeAll();
if (type == "remote") {
Ext.MessageBox.alert("Error", response.errors.reason);
} else {
Ext.MessageBox.alert("Warning", "Can't load data");
}
gridPanel.add(grid);
gridPanel.doLayout();
Ext.getBody().unmask();

});
gridPanel.doLayout();
Ext.getBody().unmask();
grid.relayEvents(grid.store,['update','destroy','save']);

cwilson
24 Nov 2009, 7:33 PM
Hi Condor,

Thanks for the plugin. I'm wondering what license applies to this code? Could you possibly update the zip file to include the license?

Also, I made the following change to loadData so that the PagingToolbar will be initialized at the same start position as the store:



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


Edit: sorry, the code above is for the Ext 2.x version of PagingStore. I haven't tested with 3.x.

Condor
24 Nov 2009, 11:47 PM
The PagingStore code is available under the MIT license (http://en.wikipedia.org/wiki/MIT_License).

I would have used:

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

You might also want to include these changes to PagingToolbar (http://www.extjs.com/forum/showthread.php?p=395032#post395032).

nandubochkar
4 Jan 2010, 4:28 AM
hello, as i am new to extjs can anyone suggest me wht the error is

while i am using Ext.ux.data.PagingStore i am getting object expected
but i had verified entire code for any syntactical error but to vain..
code is as follows..

i am using it for local paging....


var

store = new Ext.ux.data.PagingStore({

proxy : new Ext.ux.data.PagingMemoryProxy({url: ......}),
reader : new Ext.data.JsonReader({fields:['postId','No','Subject','PostedBy','Replies','LastUpdated']})
});
store.load({params:{start:0, limit:3}});

Condor
4 Jan 2010, 5:16 AM
Use either a PagingStore or a PagingMemoryProxy, but not both.

I would recommend using a PagingStore with a HttpProxy.

subbugv
4 Jan 2010, 8:49 PM
thanks condor for ur reply..
but when i am using ordinary store i get all the details populated in the grid.
when i am using pagingstore with httpproxy as u suggested it is showing some errors like object expected in the lines where i declared my grid....
code is as follows


var

store = new Ext.ux.data.PagingStore({

proxy : new Ext.data.HttpProxy({url: urlPath+'/pages/getForums.jsp?&pnode='+selectnodeId+'&userId='+loginUserId+'&userName='+userName}),//nodeId='+nodeId+'
reader : new Ext.data.JsonReader({fields:['postId','No','Subject','PostedBy','Replies','LastUpdated']})
});
store.load({params:{start:0, limit:3}});
var grid = new Ext.grid.GridPanel({
width :740,
height :585,
title :'FORUMS',
store : store,
trackMouseOver :false,
disableSelection:true,
loadMask : true,
tools :[{
id:'close',
qtip: 'closes the window',
handler:


function(event, toolEl, panel)

{
centerpanelviewport.removeAll();
centerpanelviewport.doLayout();
}
}],


columns:[
{
id:'No',header:'S.No',dataIndex:'No',width: 20,sortable: true,tooltip:'Serial Number'
},
{
header: 'Subject',dataIndex: 'Subject',autowidth:true/*30*/,sortable: true,tooltip:'Subject Of Discussion'
},
{
header: 'Posted By',dataIndex: 'PostedBy',autowidth:true/*50*/,sortable: true,tooltip:'Posted By '
},
{
header: 'Replies',dataIndex: 'Replies',width: 30,sortable: true,tooltip:'Replies For This Topic'
},
{
header: 'Last Updated',dataIndex: 'LastUpdated',width:50,sortable: true,tooltip:'Last Updated Time'
},
{
header: 'PostId',dataIndex: 'postId',hidden:true,width:0,sortable: true,tooltip:'PostId'
}
],
//),


// customize view config
viewConfig: {
forceFit:true
},


// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[{
xtype :'tbbutton',
text : 'Add New Post',
tooltip :


'Click here for adding a New Post to Forum',

handler : function()
{
centerpanelviewport.removeAll();
centerpanelviewport.doLayout();
addNewPostCall(pnode,selectnodeId,Tree_Category,centerpanelviewport,height,width);
}
}
]
})
});

can any one suggest wht's the problem is ?
i require local paging instead of remote one....

subbugv
5 Jan 2010, 12:39 AM
i need local paging using paging memory and httpproxy
can any one tell me model code using this ?......?

Condor
5 Jan 2010, 4:58 AM
Your code looks ok. What is your server returning?

ps. Columns don't have a autowidth config option (there is a plugin that can do this).

subbugv
5 Jan 2010, 9:31 PM
yes condor code is looking ok but while i am using this pagingstore it returning some "Object Expected" kind of error inside the grid.
If i am using ordinary Ext.data.store it is displaying all columns in the grid, with no error throwing up.

code for store is

var store = new Ext.ux.data.PagingStore({
proxy : new Ext.data.HttpProxy({url: urlPath+'/pages/getForums.jsp?&pnode='+selectnodeId+'&userId='+userId+'&userName='+uName}),
reader : new Ext.data.JsonReader({fields:['postId','No','Subject','PostedBy','Replies','LastUpdated']})
});

i need local paging
any idea... ?

can any one suggest code for store using paging store and httpproxy for local paging ?

Condor
5 Jan 2010, 11:45 PM
So if you change Ext.ux.data.PagingStore to Ext.data.Store you don't get any errors?

Which Ext version are you using? (I haven't tested Ext.ux.data.PagingStore with Ext 3.1 yet).

subbugv
6 Jan 2010, 12:47 AM
while i am using Ext.data.store for paging i am getting no errors but local paging is not possible(to my knowledge)
while i am using Ext.ux.data.Pagingstore i am getting script errors like "object required"
i am using Ext 3.0.
can u through some light upon "how to use local paging in Ext 3.0."
i have 50 records out of which i need to show 5 at a time(local paging).
i checked out many threads upon this topic but to vain since errors still prevailing.

Condor
6 Jan 2010, 1:38 AM
Replacing Ext.data.Store with Ext.ux.data.PagingStore should do the trick and shouldn't give any errors.

Could you post either:
1. An example that shows the error.
2. The stacktrace of the error you get (using ext-all-debug.js)?
3. Make your application available on a public HTTP server (for debugging)?

subbugv
6 Jan 2010, 2:07 AM
i jst learnt how to debug
now it is showing the error in the below line tht this.load.proxy is not a function
can any one suggest wht it means ?

this.proxy.load(p, this.reader, this.loadRecords, this, options)

Condor
6 Jan 2010, 3:24 AM
That line is from Ext 2.x.

You are mixing Ext 2 and 3 code!

subbugv
6 Jan 2010, 4:09 AM
sorry i overlook tht case... sorry for troubling u condor !!!!!!!!!

but still when i am using ordinary store with pagingmemory proxy(version 3.1.0)
still i have none returned from server.
store is defined as follows..


var store = new Ext.data.Store({
proxy : new Ext.ux.data.PagingMemoryProxy({url: urlPath+'/pages/getForums.jsp?&pnode='+selectnodeId+'&userId='+userId+'&userName='+uName}),

fields :['postId','No','Subject','PostedBy','Replies','LastUpdated']
});

any idea ????

Condor
6 Jan 2010, 4:13 AM
I really recommend using PagingStore instead of PagingMemoryProxy because of the advantages listed in the first post.

kveeiv
6 Jan 2010, 11:52 AM
Condor - thanks for the great, easy to use extension. This made adding local paging a breeze and saved me a bunch of time and hassle of moving to PagingMemoryProxy or worse going back to the server again and again for a relatively small amount of data.

I have only worked with PagingStore for the first time today, but naturally I have come across the problem you outline here (pretty common I imagine, for anyone with filtering):


Yes, that's the problem I described.

1. Go to page 15 (shows records 71-75)
2. Filter the records (e.g. 10 remaining)
3. Page 15 shows as blank (technically correct)
4. Go to page 1 (shows records 1-5)

Filtering (and probably sorting too) should reset the page to 1.

Since PagingStore has taken over the responsibility of providing the paged data, I thought it might be appropriate to try and put some form of a bounds-checking solution in that class. This is a really small change that implements your suggestion to auto-reset to page 1 only in cases that match your above description. PagingToolbar seems to behave at least as well as it did without this change (which is to say, not perfectly, but not worse). Do you have any thoughts on this approach?


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 = 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;
}
}

Condor
6 Jan 2010, 11:34 PM
Yes, that would be a good way to handle this, but you also need a way to apply this to the options object used in the load(), otherwise the paging toolbar doesn't show it's on the first page.

allenlako
21 Feb 2010, 10:39 AM
Just wanted to report a change that the PagingStore needs to make in order to be compatible with 3.1. In version 3.1, the JSONWriter discontinued the use of the write function and has changed it to the apply function. apply(params,baseParams,action, records). PagingStore will need to swap out write with apply.

calabacita
22 Feb 2010, 9:17 AM
Hello Condor,

I'm trying to paginate the results in a search. The result is shown in a GridPanel, and I am using PagingStore to paginate in local mode.
The problem is that the same first fetched results appear in all of the pages in the grid, althought the bottom toolbar change.

This is my relevant code:


var busquedaRecord = new Ext.data.Record.create([
{name: 'codIG', type: 'string'},
{name: 'aplicacion', type: 'string'},
{name: 'proceso', type: 'string'},
{name: 'estado', type: 'string'},
{name: 'criticidad', type: 'string'},
{name: 'descripcion', type: 'string'},
{name: 'fecha', type: 'date', format: 'd/m/Y'}
]);


var readerJson = new Ext.data.JsonReader({
root : 'items',
successProperty : 'success',
totalProperty : 'rowNumber'
},busquedaRecord

);

var result = new Ext.ux.data.PagingStore({
reader: readerJson,
lastOptions: {params: {start:0, limit:5}}
});

var columns = [
{header: "C&oacute;digo IG", width: 70, sortable: true, dataIndex: 'codIG'},
{header: "Aplicaci&oacute;n", width: 75, sortable: true, dataIndex: 'aplicacion'},
{header: "Proceso", width: 75, sortable: true, dataIndex: 'proceso'},
{header: "Estado", width: 75, sortable: true, dataIndex: 'estado'},
{header: "Criticidad", width: 70, sortable: true, dataIndex: 'criticidad'},
{id:'descripcion',header: "Descripci&oacute;n", width: 250, sortable: true, dataIndex: 'descripcion'},
{header: "Fecha creaci&oacute;n", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'fecha'}
];

var paging = new Ext.PagingToolbar({
pageSize: 5,
store: result,
displayInfo: true,
displayMsg: 'Mostrando {0} - {1} de {2}',
emptyMsg: "No existen datos",
listeners: {
onLoad: function(){
//delete this.store.lastParams;
//this.doLoad(this.cursor);
var options = Ext.apply({add: append}, this.lastOptions ? this.lastOptions.params : null, this.baseParams);
this.isPaging(options);
var r = this.reader.readRecords(o);
this.loadRecords(r, options, true);
}
});

var busquedaGrid = new Ext.grid.GridPanel({
view: new Ext.grid.GridView(),
store : result,
columns: columns,
autoExpandColumn: 'descripcion',
bbar : paging,
height:250,
width:600
});

var frmIzq = new Ext.FormPanel ({

...
buttons :[{
text: 'Buscar',
iconCls : 'silk-magnifier',
handler : function(){
if(frmIzq.getForm().isValid()){
frmIzq.getForm().submit({
url: 'ServletBuscar',
method:'POST',
failure: ...
success: function (form, request) {
result = new Ext.ux.data.PagingStore({
reader: readerJson,
data:Ext.util.JSON.decode(request.response.responseText),
lastOptions: {params: {start: 0, limit:5}}
});

busquedaGrid.store = result;

paging.bindStore(busquedaGrid.getStore());
busquedaGrid.footer = paging;

busquedaGrid.render();
result.load({params:{start:0, limit:5}});

busquedaGrid.store.commitChanges();
busquedaGrid.getView().refresh();
}
});

}
}
}
});I've try using PagingMemoryProxy, but the result is the same!!!

Thanks in advance for you help!
kind regards.

Little Pumpkin

calabacita
23 Feb 2010, 12:05 AM
in my opinion, the toolbar paginates correctly, but doesn't show the changes in the grid...how can i solve it?

Pleasee I need some help!
Thanks a lot!!

Little Pumpkin.

Condor
1 Mar 2010, 2:06 AM
in my opinion, the toolbar paginates correctly, but doesn't show the changes in the grid...how can i solve it?

You could try this patch (https://www.extjs.com/forum/showthread.php?p=395032#post395032).

calabacita
1 Mar 2010, 2:24 AM
Thanks a lot Condor, for your reply!!!

On the success event in the submit, I changed some things:


//instead of create a new object.
result.loadData(Ext.util.JSON.decode(request.response.responseText));

paging.bindStore(busquedaGrid.getStore());
busquedaGrid.footer = paging;
busquedaGrid.render();
busquedaGrid.getView().refresh();

Now, the grid and the pagingToolbar run correctly :D

scblue
9 Mar 2010, 5:30 PM
Hi,

I changed this



stores[t] = new Ext.data.JsonStore({
url: 'creategrid5.php?action=listing&type='+ t,
//storeId: 'wstore',
root: 'rows',
listeners: {
metachange: function(store, meta) {
var g = grids[t];
var cm = g.getColumnModel();
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);

}
}
});
to this:



stores[t] = new Ext.ux.data.PagingArrayStore({
url: 'creategrid5.php?action=listing&type='+ t,
//storeId: 'wstore',
autoLoad: {params: {start: 0, limit: 10}},
reader: new Ext.data.JsonReader(),
listeners: {
metachange: function(store, meta) {
var g = grids[t];
var cm = g.getColumnModel();
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);
}
}
});
And now my grid does not show anything.
Any idea what went wrong?
I am using metadata to populate the grid.

Thanks!

----------------------------- Edit----------------------------------

Nvm, ignore my stupidity.
Did it with Ext.ux.data.PagingJsonStore.

Thanks!!!!

Andrea Gioia
25 Mar 2010, 2:53 AM
In ext 3.1 final should be something like this ...


Ext.override(Ext.PagingToolbar, {
doRefresh: function(){
delete this.store.lastParams;
this.doLoad(this.cursor);
}
});

gr8 job anyway, you have saved my day :D

elizard
1 Apr 2010, 9:24 AM
Just upgraded to Ext 3.2.0, and noticed that sort is broken as multi-sort was introduced in 3.2.0. My quick and dirty fix is to change the signature of the method to not accept any arguments, and set the required arguments as follows:



sortData: function() {
var direction = this.sortInfo.direction || "ASC"
f = this.sortInfo.field;


Obviously the code won't work with multi-sort, but works well enough for my own use.

PranKe01
7 Apr 2010, 5:31 AM
Same problem for me. Updated to 3.2 and the PagingToolbar sort doesn't work anymore. Would be nice, if it could be fixed :)

deister
15 Apr 2010, 9:07 AM
I'm having the same issue with sorting and 3.2.

any plans for an update?

Thanks!

Remy
22 Apr 2010, 8:01 AM
Fabulous ux, as always, good work Condor.=D>

elesel
3 May 2010, 12:07 PM
Just upgraded to Ext 3.2.0, and noticed that sort is broken as multi-sort was introduced in 3.2.0. My quick and dirty fix is to change the signature of the method to not accept any arguments, and set the required arguments as follows:



sortData: function() {
var direction = this.sortInfo.direction || "ASC"
f = this.sortInfo.field;
Obviously the code won't work with multi-sort, but works well enough for my own use.

You could also try this, which uses the base Ext.data.Store code after taking care of PagingStore-specific additions:



sortData: function {
if (this.allData) {
this.data = this.allData;
delete this.allData;
}
Ext.data.Store.prototype.sortData.call(this);
this.applyPaging();
}

genio
5 May 2010, 3:53 AM
Great Stuff Condor!

Can the paging store be used with the grouping store?

Condor
5 May 2010, 10:51 PM
You would need a PagingGroupingStore (code somewhere in this thread).

However, it's use is limited, because it can span groups over multiple pages.

genio
6 May 2010, 2:25 AM
ooh yes, found it!

I guess the limitation can make it confusing for the user... I will investigate how it looks.

Now, on the paging front, is it actually possible to make the page size configurable for the user? I guess that would be more of a paging Tool bar issue, but I have not found any references on this in the forum...

saadkhan
6 May 2010, 3:43 AM
Hello Condor,
I downloaded you extension of paging for local data but unfortunately it did not work for me.
I am doing things like this, please do correct me...

My store:


var megaStore = new Ext.data.ArrayStore({
fields:
[
'VehicleId',
'VehicleNumber',
'CustomerName',
'DeviceType',
'CustomerId',
'CustomerFatherName',
'CustomerMotherMaidenName',
'CustomerCNIC',
'CustomerAddress',
'CustomerOfficeAddress',
'CustomerWebtrackUsername'
],
lastOptions: {params: {start: 0, limit: 5}},
remoteSort:true
});



Filling data in store:


// A .NET extension which calls server-side method and returns with data
Autotrack.Remote.getAllInformation({
success: function(basicFrom, action)
{
// action.result.data has the returned data
Ext.iterate(action.result.data, function(prop, value)
{
newDataRow = {
VehicleId: prop,
VehicleNumber: value['VehicleNumber'],
CustomerName: value['CustomerName'],
DeviceType: value['DeviceType'],
DeviceId: value['DeviceId'],
CustomerId: value['CustomerId'],
CustomerFatherName: value['CustomerFatherName'],
CustomerCNIC: value['CustomerCNIC'],
CustomerMotherMaidenName: value['CustomerMotherMaidenName'],
CustomerAddress: value['CustomerAddress'],
CustomerOfficeAddress: value['CustomerOfficeAddress'],
CustomerWebtrackUsername: value['CustomerWebtrackUsername']
};
newRecord = new megaStore.recordType(newDataRow);
megaStore.add(newRecord);
});
}
});


My grid:


var manageCustomerWindowGrid = new Ext.grid.GridPanel({
store: megaStore,
hideHeaders: true,
layoutConfig:
{
autoExpandColumn: 'customerName', autoExpandMin: 550, autoHeight: true
},
autoExpandColumn: 'customerName', autoExpandMin: 550, autoHeight: true,
cm: new Ext.grid.ColumnModel({
columns:
[
{ id:'customerName', header: "CustomerName", dataIndex: 'CustomerName', renderer: function(value,p,r){ return String.format("<b>{0}</b><br />{1} {2} {3}<br />", value, r.data['VehicleNumber'], r.data['DeviceType'], r.data['VehicleName']); }}
]
}),
trackMouseOver: false,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: megaStore,
displayInfo: true,
displayMsg: 'Displaying Customers {0} - {1} Of {2}',
emptyMsg: "No Customers To Display"
})
});


Still my grid shows all the data at once and no paging thing works. Please guide me what should I do now. I am stuck in it!

Condor
6 May 2010, 4:27 AM
Ext.data.ArrayStore -> Ext.ux.data.PagingArrayStore

saadkhan
6 May 2010, 10:05 AM
Ext.data.ArrayStore -> Ext.ux.data.PagingArrayStore

Didnt work!
I replaced Ext.data.ArrayStore with Ext.ux.data.PagingArrayStore...is that all I needed to do?

Condor
6 May 2010, 10:47 AM
remoteSort:true? You are using local data!

Also, you are not loading the store. Instead, you are adding the records one by one. If you do that you need to call applyPaging() after you are done.

ps. I woujld recommend loading the store, because it's faster.

george4rotech
18 May 2010, 10:58 AM
Trying to use your plugin, below are the "before"/"after" versions of my store. When I convert to using your PagingArrayStore, I get the error "recordType is undefined" from line 23540 of ext-3.2.1/ext-all-debug.js.

Could it be because the "RecordType" parameter being pass to "new Ext.data.ArrayReader" is not "a Record (http://www.extjs.com/deploy/dev/docs/output/Ext.data.Record.html) constructor created from Ext.data.Record.create (http://www.extjs.com/deploy/dev/docs/output/Ext.data.Record.html#Ext.data.Record-create)." but rather the other permissible parameter, "an Array of Field (http://www.extjs.com/deploy/dev/docs/output/Ext.data.Field.html) definition objects"?

Or maybe could it be because I initially define the data as []? I do this to begin with as the grid will be empty, but depending on an event, then the data gets populated through a call to loadData

By the way, the before code for the store is largely based on what was generated by Ext Designer, all I added are the mappings. Thanks in advance.

Before:

this.store = new Ext.data.Store({
autoDestroy : true,
reader : new Ext.data.ArrayReader({}, [{
name : 'locId', mapping: 'locId'
}, {
name : 'locName', mapping: 'locName'
}, {
name : 'locCity', mapping: 'locCity'
}, {
name : 'locState', mapping: 'locState'
}, {
name : 'hasAccess', mapping: 'hasAccess'
}]),
data : []
});After:

this.store = new Ext.ux.data.PagingArrayStore({
autoDestroy : true,
reader : new Ext.data.ArrayReader({}, [{
name : 'locId', mapping: 'locId'
}, {
name : 'locName', mapping: 'locName'
}, {
name : 'locCity', mapping: 'locCity'
}, {
name : 'locState', mapping: 'locState'
}, {
name : 'hasAccess', mapping: 'hasAccess'
}]),
data : [],
lastOptions: {params: {start: 0, limit: 25}}
});

Condor
18 May 2010, 11:48 AM
You can't specify a reader in a PagingArrayStore (or an ArrayStore for that matter).
For that you need a normal PagingStore.

george4rotech
18 May 2010, 12:28 PM
Switching to your PagingStore did the trick, thanks. What's particularly impressive is that it all works along with our own extension to PagingToolbar.

Boing
18 May 2010, 9:33 PM
Hello,
I was able to get the paging to load the data I got from a remote function that returns a proper json object,
In this case it's "data:FnQueryQCTracker()" that queries an access database (yeah I know lame). Yay, Woohoo, kudos to your add-on, it's great!
However, I have not been able to get the function to run again when you click on the refresh button.

I've searched for hours for anything that would help, but I could not find anything.

I tried adding the override mentioned in the first message, however, it didn't work.
Where exactly do you place the override functions/statements?
Or is something else wrong?

Here is my code, if you happen to find anything wrong with it.


var store = new Ext.ux.data.PagingArrayStore({
fields: [
{name:"submissionNumber"},
{name: "submitDate",
type: 'date',
dateFormat: 'D m/d/Y H:i:s'
},
{name: 'submitProc'},
{name: 'submitName'},
{name: 'locationOne'},
{name: 'locationTwo'},
{name: 'qcStatus'},
{name: 'qcMember',type:'string'},
{name: 'completeDate',
type: 'date',
dateFormat: 'D m/d/Y H:i:s'
},
{name:'qcComments'},
{name: 'emailHTML'}
],
data: FnQueryQCTracker(),
lastOptions: {params: {start: 0, limit: 25}}
});
var ObjGrid = new Ext.grid.GridPanel({
autoExpandColumn: "submitName",
autoScroll: true,
clicksToEdit: 1,
columnLines: false,
cm: ObjColModel,
enableColumnMove: false,
enableHdMenu: false,
header: false,
height: 700,
hideBorders: false,
id: 'qc-t-grid',
//layout: 'fit',
plugins: [editor],
region: 'west',
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
selectionchange: function(sel){
var rec = sel.getSelected();
if(rec){
Ext.getCmp('qcPreview').body.update(rec.get('emailHTML'));
}
}
}
}),
split: 'true',
stateful: true,
stateId: 'grid',
store: store,
stripeRows: true,
title: 'QC Tracker',
viewConfig: {
forceFit:true
},
width: 600,
// paging bar on the bottom
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});Just as a side note, would this work ok with a task mgr to auto update the store?

Thank you very much for your time and help. Sorry to bother.

Condor
18 May 2010, 10:09 PM
Did you use the override mentioned in the first post?

Ext.override(Ext.PagingToolbar, {
refresh: function(){
delete this.store.lastParams;
this.doLoad(this.cursor);
}
});

If the number of records you are loading is substantial (>100) and the number of modified records is relatively low (<10%) I would recommend doing a separate Ajax request to only get the changed records and update the records currently in the store.

Boing
19 May 2010, 5:42 PM
I tried placing the override in various places of the html page, of the scripts, etc. Where would you recommend that I place the Ext.override blip? Thanks!

Condor
19 May 2010, 10:11 PM
It's an override of existing Ext code, so you should include it directly after ext-all.js.

george4rotech
25 May 2010, 11:49 AM
The isFiltered method seems misimplemented in a couple of ways. First it's currently implemented as follows:


return this.snapshot && this.snapshot != (this.allData || this.data);But I think the following is what was actually intended:


return this.snapshot && this.snapshot != this.allData && this.snapshot != this.data;But even the above simple fix to the apparent logic error does not "work" (for me, it always returns true), because the references will not necessarily be equal, although the underlying data is, due to how applyPaging is implemented. applyPaging does not assign/copy references, but rather it creates a new MixedCollection and then sets items/keys on it.

Here's some code I wrote, that gives me the boolean value I would expect from the isFiltered() method; the code is from the datachanged listener on a store, but where the scope is the grid. The key idea being, however, that to compare objects, or in this case the useful "keys" array, I first represent the array as a string.

Hope this helps.


if (this.store.snapshot) {
//work around mis-implementation of PagingStore's isFiltered() method:
var commaDelimitedSnapshotKeys = this.store.snapshot.keys.join(',');
if (commaDelimitedSnapshotKeys != this.store.allData.keys.join(',')
&& commaDelimitedSnapshotKeys != this.store.data.keys.join(',')) {
//etcetera

mvassau
25 May 2010, 12:38 PM
I was struggling with the same thing as Boing and in looking at the 3.2.1 source (line 48002) the override should use doRefresh not refresh:



Ext.override(Ext.PagingToolbar, {
doRefresh: function () {
delete this.store.lastParams;
this.doLoad(this.cursor);
}
});


Thought I'd pass this along for others having the same issue.

BTW, Thanks Condor for the awesome UX.

PranKe01
25 May 2010, 11:43 PM
Maybe all the fixed should be implemented in the code of the first post :)

chakrics
26 May 2010, 7:55 AM
Thanks for cool widget, works great for me :). BTW I did use doRefresh as refresh doesn't work.

george4rotech
27 May 2010, 5:28 AM
Let me preface this by repeating, I too am thankful for this component. Please consider my grid/x-type definition below. I've included it in its entirety, including a couple of plug-ins, which are beside the point, but nevertheless demonstrate how well this component plays with other extensions/plug-ins, which was the thing that impressed me to begin with! To duplicate the issue without the plug ins though some of that code may need to be removed.

Ok, my issue is that, when trying to do local sorting, I'm getting the following error:

this.fields.get(f) is undefined
http://localhost:9080/app/scripts/PagingStore.js (http://localhost:9080/eIntakeWeb/scripts/PagingStore.js)
Line 183

"f" I believe should hold the field name, but when using Firebug, this is undefined for some reason. Thanks in advance for any and all guidance in solving this issue. Note that the data initialized below as [] is being populated through a call to loadData in the "refOwner" component. Let me know if this is not clear or if I can provide a screenshot to help demonstrate.


Client.app.management.useraccess.LocationGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent : function() {
this.store = new Ext.ux.data.PagingStore({
autoDestroy : true,
reader : new Ext.data.ArrayReader({}, [{
name : 'locId', mapping: 'locId'
}, {
name : 'locName', mapping: 'locName'
}, {
name : 'locCity', mapping: 'locCity'
}, {
name : 'locState', mapping: 'locState'
}, {
name : 'hasAccess', mapping: 'hasAccess'
}]),
data : [],
lastOptions: {params: {start: 0, limit: 25}},
remoteSort: false
});

var checkColumn = new Ext.grid.CheckColumn({
header: 'Access Granted',
sortable: true,
resizable: false,
width: 100,
dataIndex: 'hasAccess',
align: 'center',
fixed: true
});

this.columns = [{
xtype: 'gridcolumn',
header: 'Client Location Number',
sortable: true,
resizable: true,
width: 175,
dataIndex: 'locId',
align: 'left'
}, {
xtype: 'gridcolumn',
header: 'Client Location Name',
sortable: true,
resizable: true,
width: 175,
dataIndex: 'locName',
align: 'left'
}, {
xtype: 'gridcolumn',
header: 'Client Location City',
sortable: true,
resizable: true,
width: 175,
dataIndex: 'locCity',
align: 'left'
}, {
xtype: 'gridcolumn',
header: 'Client Location State',
sortable: true,
resizable: true,
width: 175,
dataIndex: 'locState',
align: 'left'
},
checkColumn
]

this.filters = new Ext.grid.GridFilters({
local: true
,filters: [
{type: 'numeric', dataIndex: 'locId'}
,{type: 'string', dataIndex: 'locName'}
,{type: 'string', dataIndex: 'locCity'}
,{type: 'string', dataIndex: 'locState'}
]
});

this.plugins = [checkColumn, this.filters];

this.bbar = new PagingToolbar({
store: this.store
,displayInfo: true
,displayMsg: 'Displaying locations {0} - {1} of {2}'
,emptyMsg: "No locations to display"
});

this.tbar = {
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Save User Access',
listeners: {'click': function() {this.refOwner.onSaveUserClick();}, scope: this}
}]
};

Client.app.management.useraccess.LocationGrid.superclass.initComponent.call(this);
}
});

Ext.reg("useraccesslocationgrid", Client.app.management.useraccess.LocationGrid);

george4rotech
27 May 2010, 6:44 AM
Adding the following two lines to the top of PagingStore.js's "sortData" method fixed my issue. Could this be a compatability issue with ExtJS 3.2.1? Because I see that Ext.data.Store.applySort method on line 21976 of ext-3.2.1/ext-all-debug.js calls sortData with no arguments, but PagingStore's sortData expects two arguments


sortData: function(f, direction) {
f = this.sortInfo.field;
direction = this.sortInfo.direction;
//etcetera

Condor
27 May 2010, 6:53 AM
I'll try working on an Ext 3.2.1 compatible PagingStore (including multi-field sort) this weekend

george4rotech
27 May 2010, 1:11 PM
I'll try working on an Ext 3.2.1 compatible PagingStore (including multi-field sort) this weekend

Awesome thanks we will look forward to it!

p3p3
28 May 2010, 12:05 AM
RESPECT for this very nice plugin! Great work Condor! :D

regards
p3p3

Condor
29 May 2010, 6:11 AM
OK, I created an Ext 3.2 compatible PagingStore.

New features in v0.5:
- Only for Ext 3.2 (and up?).
- Added PagingGroupingStore (although I don't recommend using it).
- Added Ext.ux.PagingStore with doRefresh patch and support for adding/removing/clearing records.

tchitani
2 Jun 2010, 8:51 PM
Hi Condor

I know you don't recommend using your great plugin with a GroupingGrid. However, is it possible in case if let say group C spans across 2 pages, recalculate a page size after load and apply paging again with a new page size to avoid the spanning?

Thank you

Condor
2 Jun 2010, 10:58 PM
Yes, you could do that.

For initial load I recommend using suspendEvents/resumeEvents to stop it from displaying the page with the wrong pageSize.

Rotterdam
2 Jun 2010, 11:48 PM
Hi Condor,

Thanks for your great work on this UX. It works and performs great even with large record sets (5000+)!

Yesterday I moved a project to Ext 3.2.1 and also upgraded the PagingStore to the new 0.5 version. I then noticed a behaviour which caused a problem for me:

In version 0.5 the START and LIMIT params are also being send to the server when retrieving records, version 0.41 did not have this behaviour.

Is this intentional and what is in your opinion the best way to prevent this without have to do 'server side' adjustments?

I suppose replacing:

this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options); with:


this.proxy.request(Ext.data.Api.actions[action], rs, this.baseParams, this.reader, this.createCallback(action, rs, batch), this, options);
Does fix this for me. However this is not really a 'correct' fix.

What are your thoughts on this?

Many thanks for this UX and your help is very much appreciated!

tchitani
3 Jun 2010, 5:46 PM
Thanks Condor

But if I suspendEvents on beforeload or on load, how I can check if group C spans across 2 pages? I will not be able to use for example store.collect('groupfield') to get unique fieldname and compare the set per page. Is there any better solution how can I check if group C spans accross 2 pages, and if yes, get a number of records grouped by group C and recalculate a paze size by adding this number to the initial page size and reload the store?

A simple example will be really usefull.

Thank you in advance

mayurid
4 Jun 2010, 3:33 AM
how to place a date field on toolbar..please help with code..i want that date to be inserted into the grid

Condor
4 Jun 2010, 3:46 AM
Completely untested:

store.suspendEvents();
store.load({
callback: function(){
var limit = ... // calculate limit for first page based on first group
store.resumeEvents();
store.load({params: {start: 0, limit: limit}});
}
});

Condor
4 Jun 2010, 3:47 AM
how to place a date field on toolbar..please help with code..i want that date to be inserted into the grid

Is this related to PagingStore? If not, please start a new thread.

aDoF96
5 Jun 2010, 12:13 PM
Hi!

I'm using PagingGroupingStore in a grid and everything is fine with that, but the sort options of the grid don't work :\
Is it normal this conflict?

aDoF96
7 Jun 2010, 3:11 PM
Hi!

I'm using PagingGroupingStore in a grid and everything is fine with that, but the sort options of the grid don't work :\
Is it normal this conflict?
Help here please!!

tchitani
8 Jun 2010, 12:20 AM
Thanks Condor, I'm trying to implement your idea of dynamic paging based on group records to avoid group spanning, but...I can not get the total number of the records to properly setup paging (on the initial load).


var reader = new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
successProperty: 'success',
fields: [{name: 'application'},{name: 'system'}]
});
var store = new Ext.ux.data.PagingGroupingStore({
reader: reader,
proxy: new Ext.data.HttpProxy({
url: 'data.txt', method: 'GET'
}),
sortInfo: {field: 'application', direction: "ASC"},
groupField: 'system'
autoLoad: {params: {start: 0, limit: reader.totalProperty}} // limit undefined
});
store.suspendEvents();
store.load({
callback: function(){
var uArr = store.collect('system');
var records = [];
var limit = 0;
for (var i = 0; i < uArr.length; i++) {
var fl = Math.round(uArr.length/2)
var re = new RegExp(RegExp.escape(uArr[i]));
records[i] = store.queryBy(function(r) { return r.get('system').match(re); });
if (i<fl) limit += records[i].items.length;
}
store.resumeEvents();
store.load({params: {start: 0, limit: limit}});
}
});
var bbar = new Ext.ux.PagingToolbar({
store: store,
pageSize: store.getTotalCount(), // total undefined
displayInfo: true,
displayMsg: 'Displaying {0} - {1} of {2}',
emptyMsg: "No records to display"
});

tchitani
8 Jun 2010, 12:25 AM
data.txt file


{'success': true,
'total': 43,
'results': [
{'application':'Application 1', 'system':'System A'},
{'application':'Application 2', 'system':'System B'},
{'application':'Application 3', 'system':'System C'},
{'application':'Application 4', 'system':'System D'},
{'application':'Application 5', 'system':'System E'},
{'application':'Application 6', 'system':'System D'},
{'application':'Application 7', 'system':'System E'},
{'application':'Application 8', 'system':'System B'},
{'application':'Application 9', 'system':'System A'},
{'application':'Application 10', 'system':'System F'},
{'application':'Application 11', 'system':'System A'},
{'application':'Application 12', 'system':'System A'},
{'application':'Application 13', 'system':'System D'},
{'application':'Application 14', 'system':'System D'},
{'application':'Application 15', 'system':'System E'},
{'application':'Application 16', 'system':'System C'},
{'application':'Application 17', 'system':'System C'},
{'application':'Application 18', 'system':'System C'},
{'application':'Application 19', 'system':'System D'},
{'application':'Application 20', 'system':'System D'},
{'application':'Application 21', 'system':'System B'},
{'application':'Application 22', 'system':'System B'},
{'application':'Application 23', 'system':'System A'},
{'application':'Application 24', 'system':'System A'},
{'application':'Application 25', 'system':'System A'},
{'application':'Application 26', 'system':'System A'},
{'application':'Application 27', 'system':'System B'},
{'application':'Application 28', 'system':'System D'},
{'application':'Application 29', 'system':'System E'},
{'application':'Application 30', 'system':'System E'},
{'application':'Application 31', 'system':'System E'},
{'application':'Application 32', 'system':'System E'},
{'application':'Application 33', 'system':'System A'},
{'application':'Application 34', 'system':'System A'},
{'application':'Application 35', 'system':'System C'},
{'application':'Application 36', 'system':'System C'},
{'application':'Application 37', 'system':'System C'},
{'application':'Application 38', 'system':'System C'},
{'application':'Application 39', 'system':'System C'},
{'application':'Application 40', 'system':'System F'},
{'application':'Application 41', 'system':'System F'},
{'application':'Application 42', 'system':'System C'},
{'application':'Application 43', 'system':'System D'}
]}

attack11
9 Jun 2010, 6:35 AM
Hi,

Has anyone loaded 10-20k records into a store? The guys I'm working with have tried XML and JSON stores, and the performance is great (3-12sec) in everything we try, except Firefox where the performance is 4-5x slower (Safari is the best, then Chrome/IE, then FF at a very slow last). I'm working on a related GUI that uses 2 grids that are supposed to have up to 100k records.

george4rotech
9 Jun 2010, 6:41 AM
Hi,

Has anyone loaded 10-20k records into a store? The guys I'm working with have tried XML and JSON stores, and the performance is great (3-12sec) in everything we try, except Firefox where the performance is 4-5x slower (Safari is the best, then Chrome/IE, then FF at a very slow last). I'm working on a related GUI that uses 2 grids that are supposed to have up to 100k records.

In my experience typically if FF is slower than IE at anything, its because I've left Firebug open.

attack11
9 Jun 2010, 7:05 AM
Apparently that was the case. Good news imo :)

attack11
9 Jun 2010, 11:32 AM
Hi hi,

I was just debugging my multi-grid GUI and noticed that .addSorted() is not in the class and it throws up a record error (for obv reasons).

It'd be nice to have that method.

vtulin
10 Jun 2010, 10:24 PM
Hi, Condor!

thank you for your module! Could you please help me with my trouble:
I'm using a store locally, and to have a greater performance, I'm filtering data using XPath, it's much more simplier and faster. When I'm using my store without paging I'm just changing my proxy, and load data again:

grid.store.proxy = new Ext.data.MemoryProxy(xml);
grid.store.load();
all works fine, but when I'm using a paging store, the same method works, but it breaks paging, and if I'm doing the following:

grid.store.proxy = new Ext.data.MemoryProxy(xml);
grid.store.load({ params: { start: 0, limit: 15} });

it does nothing, the source is not changing.

What should I do to reload an XML to my paging store?

Thank you.

P.S. I've posted the same theme here http://www.extjs.com/forum/showthread.php?101390-PagingXmlStore-changing-XML-source-runtime

Condor
10 Jun 2010, 10:39 PM
You can't change the proxy of a store!

You should be using:

grid.getStore().proxy.data = xml; // assuming the proxy already is a MemoryProxy.
delete grid.getStore().lastOptions; // makes PagingStore request new data instead of returning page.
grid.getStore().load({params: {start: 0, limit: 15}});

vtulin
10 Jun 2010, 10:53 PM
Still nothing... Maybe something wrong with lastOptions? What is it purpose? When I'm removing this property from store all work absolutely the same.

amol.gaikwad
15 Jun 2010, 7:10 AM
Hi,

I am facing problem with PagingStore when I change the store associated with view and PagingToolbar.

When I initialise the view and PagingToolbar with store, everything works fine and I am able to go to next and previous pages and view changes accordingly.:D
But after that I change the store associate with view and PagingToolbar. Then PagingToolbar shows correct number of pages and view shows correct images on first page but if I go to next/previous page, view doesn't update. :((


Below is my files store:

Ext.ux.files.stores.FilesStore = function (config) {
Ext.ux.files.stores.FilesStore.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.files.stores.FilesStore, Ext.ux.data.PagingStore, {
lastOptions: {params: {start: 0, limit: 16}},
proxy: some proxy
reader: some reader
),
});


Below is my component structure:
initComponent: function(){
this.view = new Ext.DataView({
emptyText: '<div style="padding:10px;">No images match the specified filter</div>',
singleSelect: true,
store: this.selectedFolder.getFiles(),
tpl: this.thumbTemplate
});

Ext.apply(this, {
items: this.view,

bbar: new Ext.ux.PagingToolbar({
id: 'bbarId',
displayInfo: false,
pageSize: 5,
scope: this,
store: this.selectedFolder.getFiles()
})
})

}


To change the store:

folderClick: function(folder){
this.selectedFolder = folder;
var c = Ext.getCmp(this.thumbnailGridPanelId);
var bbar = Ext.getCmp('bbarId');
c.view.store = this.selectedFolder.getFiles();
bbar.bindStore(c.view.store);
c.view.refresh();
},


getFiles = function () {

this.files = new Ext.ux.files.stores.FilesStore({
this.files.load();
return this.files;
}

I will appreciate if anybody can help.
Thanks,
Amol

Condor
15 Jun 2010, 10:49 AM
1. Never add complex objects to the prototype, because they will be shared by all instances! lastOptions, proxy and reader need to be assigned in the constructor or initComponent.
2. You can't change the store of a component by assigning a new store to the 'store' property, because all event handlers also need to be removed from the old store and reattached to the new store. Use the DataView bindStore() method to set the store.

amol.gaikwad
15 Jun 2010, 10:53 PM
1. Never add complex objects to the prototype, because they will be shared by all instances! lastOptions, proxy and reader need to be assigned in the constructor or initComponent.
2. You can't change the store of a component by assigning a new store to the 'store' property, because all event handlers also need to be removed from the old store and reattached to the new store. Use the DataView bindStore() method to set the store.

Binding store to view solved my problem...thanks a ton...:D

Lobo
22 Jun 2010, 8:22 PM
First of all, great widget !

One quick question: is it expected that a grid using PagingJsonStore loses its selection (single row selection) as soon as the user moves to another page in the grid?.

If the user selects one record, grid.selModel.getSelected() works ok, but if the user moves to a different page in the same grid, then the same code returns null.

Thanks!

Condor
22 Jun 2010, 10:33 PM
RowSelectionModel doesn't support paging. There is a CheckboxSelectionModel with paging support in the user extensions forum which could be adapted for RowSelectionModel.

jbusuulwa
29 Jun 2010, 6:36 AM
I am new to Extjs and I have been following this thread to understand how to use the PagingStore extension by Condor. I am using ExtJs 3.2.1 and I downloaded PagingStore3.2_V05.

When I replace the Ext.data.JsonStore with Ext.ux.data.JsonPagingStore I get an error in the page 'Ext.ux.data.JsonPagingStore' is null or not an object.

Can someone point me in the right direction. Greatly appreciated. This is the code.


Ext.onReady(function(){
// create the Data Store
// var store = new Ext.data.JsonStore({
var store = new Ext.ux.data.JsonPagingStore({
proxy: new Ext.data.HttpProxy({
url:'http://localhost:8088/alcms/ace/html/user.dat',
method:'GET'
}),
lastOptions: {params:{start: 0,limit: 4}},
root: 'users',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'id', 'UserId', 'FirstName', 'LastName','PhoneNo','Email','DepId','TitleId',
]

});
var grid = new Ext.grid.GridPanel({
width:700,
height:300,
title:'ExtJS.com - Browse Airport Codes',
store: store,
trackMouseOver:false,
disableSelection:true,
loadMask: true, JS

Condor
29 Jun 2010, 6:46 AM
Did you actually include the PagingStore.js file?

jbusuulwa
29 Jun 2010, 7:14 AM
I extracted the file PagingStore.js from the zip file, under the ../js/ext/ux/data folder as shown below in the HTML file. Is this where I messed up?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Paging Grid Example</title>

<link rel="stylesheet" type="text/css" href="../js/ext/resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../js/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../js/ext/ext-all.js"></script>

<script type="text/javascript" src="..js/ext/ux/data/PagingStore.js"></script>


<script type="text/javascript" src="../js/ext/jsonStore/pagingGrid.js"></script>
<link rel="stylesheet" type="text/css" href="../js/ext/shared/grid-examples.css" />

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../js/ext/shared/examples.css" />
</head>
<body>
<script type="text/javascript" src="../js/ext/shared/examples.js"></script><!-- EXAMPLES -->
<h1>Paging Grid Example</h1>

<div id="topic-grid"></div>

</body>
</html>



JS

Condor
29 Jun 2010, 7:20 AM
Aren't you missing a / in the url?
..js/ext/ux/data/PagingStore.js

jbusuulwa
29 Jun 2010, 7:54 AM
Yah, thanks for catching that, but still no go:-?

Rotterdam
29 Jun 2010, 8:04 AM
Hi Condor,

Thanks for your great work on this UX. It works and performs great even with large record sets (5000+)!

Yesterday I moved a project to Ext 3.2.1 and also upgraded the PagingStore to the new 0.5 version. I then noticed a behaviour which caused a problem for me:

In version 0.5 the START and LIMIT params are also being send to the server when retrieving records, version 0.41 did not have this behaviour.

Is this intentional and what is in your opinion the best way to prevent this without have to do 'server side' adjustments?

I suppose replacing:

this.proxy.request(Ext.data.Api.actions[action], rs, options.params, this.reader, this.createCallback(action, rs, batch), this, options); with:


this.proxy.request(Ext.data.Api.actions[action], rs, this.baseParams, this.reader, this.createCallback(action, rs, batch), this, options);
Does fix this for me. However this is not really a 'correct' fix.

What are your thoughts on this?

Many thanks for this UX and your help is very much appreciated!

Hi Condor,

Any idea about the above? Or am I doing something else just plain wrong. Can give you a 'test case' if needed.

Many thanks!

jbusuulwa
29 Jun 2010, 9:54 AM
Hi Condor,

Thank you very much for the great work you are doing. I got my code working by just changing few lines in the Ext.ux.data.JsonPaging function and it worked.

Changed from this


var store = new Ext.ux.data.JsonPagingStore({
proxy: new Ext.data.HttpProxy({
url:'http://localhost:8088/alcms/ace/html/user.dat',
method:'GET'
}),
lastOptions: {params:{start: 0,limit: 4}},
root: 'users',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'id', 'UserId', 'FirstName', 'LastName','PhoneNo','Email','DepId','TitleId',
]

});



to this


var store = new Ext.ux.data.PagingJsonStore({
url:'http://localhost:8088/alcms/ace/html/user.dat',
autoLoad:{params: {start: 0, limit: 10}},
reader: new Ext.data.JsonReader(),
root: 'users',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'id', 'UserId', 'FirstName', 'LastName','PhoneNo','Email','DepId','TitleId',
]
});



Thank you very much, your work is greatly appreciated.

JS

thangamalar
1 Jul 2010, 4:11 AM
what would be better to use here? autoLoad or store.load?

Condor
1 Jul 2010, 4:28 AM
@thangamalar: There is no difference between autoLoad and store.load().

@jbusuulwa: Why are you using remoteSort:true?

jbusuulwa
1 Jul 2010, 6:00 PM
Actually, I rem 'd it out after finding out that I could not sort my data on the client side. After removing remoteSort all the columns with Sortable: True, can now be sortable.

Jss

thangamalar
1 Jul 2010, 9:52 PM
When you use autoLoad, the PagingToolbar won't load your store. I found that during my implementation. But now it's all fine after using your PagingStore. Thanks for it.

ronaldploeger
14 Jul 2010, 6:01 AM
Hi,

first of all: Thanks for the component!

One small issue I found is that when no records are loaded into the store the PagingToolbar displays "Page 2 of 1".

In my opinion the error lies in the onChange-function of the Ext.ux.PagingToolbar component:


onChange: function () {
// *** add ***
var t = this.store.getTotalCount(),
s = this.pageSize;
if (this.cursor >= t) {
this.cursor = Math.ceil((t + 1) / s) * s;
}When the total count (t) is zero the cursor will be set to the page size, e.g.:

Math.ceil((0 + 1) / 5) * 5 = 5

To get arround this I added the condition "&& t > 0" to the following line


if (this.cursor >= t && t > 0) {Just wanted to let you know.

Best,
Ronald

tobiu
18 Aug 2010, 8:20 AM
hi condor,

i finally came to play with this ux. nice work!

i can confirm the bugreport and fix of ronaldploeger.


kind regards,
tobiu

leonrenkema
26 Aug 2010, 4:38 AM
Hi

Very nice and useful plugin and very handy for our project.

But when I try to implemented the plugin and want to user local sorting I get the following error:


Uncaught TypeError: Object [object Object] has no method 'createSortFunction'

Remote sorting works but I want to prevent several server calls.

Thanks

billprince
20 Sep 2010, 7:09 PM
The lastest edition paging store is not compatible with the exist store component ! It's will affect the exist store component prototype ,just because the datasource " constructor: Ext.data.DirectStore.prototype.constructor".In contrast,the edition v0.4.1 is more effective for me ! In short,thank the author all the same!

ljschrenk
21 Sep 2010, 5:28 AM
I'm experiencing the same thing 'billprince' stated. I need version 0.5 of paging store to fix the sorting issues but the new version creates a bigger problem. My simple stores no longer work because they are looking for functions in the pagingstore. Help!

I will do my best to describe this as I am out of options for why this is not working correctly. I am using EXT 3.2.1 and PagingStore.js v0.5 for Ext 3.2

Early on in my code I have a simple store:



var topicStore = new Ext.data.SimpleStore({
fields: ['value','name'],
data: TOPICS
});
This store is used in a multiselect xtype on a FormPanel.



{
xtype: 'multiselect',
store: topicStore,
valueField: 'value',
displayField: 'name'
}
Then in a completely independent file I have a paging store created for a custom RSS reader.



var rssStore = new Ext.ux.data.PagingJsonStore({
data: records,
root: 'item',
fields: [{
name: 'title'
}],
lastOptions: {params: {start: 0, limit:30}}
});
When users pick a particular radio button on a form, the topicStore data is supposed to change according to the value of the radio button.



var topics = Ext.getCmp('advanced_form').getForm().findField('topicList');
topics.store.loadData(NewTopics);
At this point, the code breaks giving a JS error of this.isPaging is not a function.

I don't get it!! topicStore has nothing to do with pagingstore.js and should not even be entering that file. If I revert back to a previous version of pagingstore.js it works just fine and never makes it in the pagingstore loadData function. But this new file for whatever reason seems to be applying every store as a paging store. I had to upgrade to the new pagingstore version 0.5 to fix the field sorting issue.

Has anyone seen this before? What could I be missing?

jbusuulwa
21 Sep 2010, 4:18 PM
I have yet another question on the Paging, since I use the following code for paging:

var store = new Ext.ux.data.PagingJsonStore({
proxy: proxy,
autoLoad:{params: {start: 0, limit: 10}},
reader: new Ext.data.JsonReader(),
root: 'users',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'id', 'UserId', 'FirstName', 'LastName','PhoneNo','Email','DepId','TitleId',
]
});

and Grouping I use the following code:

var store = new Ext.data.GroupingStore({
id: 'user',
proxy: proxy,
reader: reader,
sortInfo:{field:'Lastname',direction: "ASC"},
groupField:'Department'
});

Can anyone help me on how to use paging in the data grouping.

Thanks in advance.

Jssb

teddyjas
21 Sep 2010, 6:50 PM
Hi condor,
from my understanding, if I use remote store, the data returned from the server has to be all the records?
I have over 6000 records in server, if I returned the whole json which about 2.5mb i think its slow to load.
anyway to speed this up?

also say, the records in server has changed, how do I refresh the data? just call the doRefresh again?

teddyjas
22 Sep 2010, 3:15 AM
one more thing I just found out...
i include this PagingStore js file... the rest of my components that uses default ext store broke...

I'm using 3.2.1 with some component using standard jsonstore and standard paging...
some of the component which load big records then using this paging store..

what I had to do to fix this is to comment out the line constructor for jsonstore and directore in your paging store JS... then it works...
my question... will this be any issue ??

Capt.JackSparrow
27 Sep 2010, 3:13 AM
When my data is empty, paging tool bar incorrectly displays the current page number.
In my case it displays : Page 2 of 1.

Is there anything I am missing out?

Capt.JackSparrow
27 Sep 2010, 3:38 AM
The above issue seems to get fixed with:
Ext.ux.PagingToolbar:


onChange: function () {
// *** add ***
var t = this.store.getTotalCount(),
s = this.pageSize;
if (t != 0 && this.cursor >= t) {


Is it a valid fix?

ljschrenk
27 Sep 2010, 3:41 AM
teddyjas,

What exactly did you comment out to get the other stores to work? I tried commenting out just the constructor lines but it didn't work. All my other stores broke when I upgraded to the new pagingstore. :(

ljschrenk
27 Sep 2010, 9:15 AM
teddyjas,

I found from reading page 2 of this thread to not use loadData, instead use:



var r = store.reader.readRecords(RECORDS);
store.loadRecords(r,Ext.apply({}, store.lastOptions), true);


When I switched from loadData to this my simple stores worked.

despay
29 Sep 2010, 8:49 PM
Hi Condor,

Is there a suggested fix to reset to page 1 after a sort or filter?

Thanks

ljschrenk
30 Sep 2010, 2:16 AM
I'm having the same issue as despay! If you have a local store with 10 pages of data, go to page 8 and run a filter, it will say no results because all the results are on page 1.

Condor
3 Oct 2010, 11:05 PM
You could set store.start = 0 before filtering the store.

Woodlander
26 Oct 2010, 7:20 AM
Hi,

I'm working on updating a rather big ASP.Net based ExtJs application from 2.2 to 3.3. The earlier version used PagingMemoryProxy which stoped working after updating. I'm now trying to replace it with PagingStore instead. In order to learn PagingStore I tried to write a simple page with a grid that loads a list of users. Strange thing is that the first time the grid populates it shows all >1000 users on one page (Display text says "Displaying users 1 - 1046 of 1046). First after refreshing the grid or clicking next page, the correct paging kicks in. What am I doing wrong?


Ext.onReady(function() {
Ext.QuickTips.init();

var record = Ext.data.Record.create([
{ name: 'Name' },
{ name: 'Id' }
]);

var reader = new Ext.data.JsonReader({ root: 'rows' }, record);

var ds = new Ext.ux.data.PagingStore({
proxy: new Ext.data.HttpProxy({
url: 'WebServices/User.asmx/GetUsers',
method: 'POST',
headers: { 'Content-type': 'application/json' }
}),
autoLoad: Ext.encode({params:{start:0, limit:30}}),
reader: reader,
remoteSort: true
});


var cm = new Ext.grid.ColumnModel([
{ id: 'Name', header: "Name", width: 60, sortable: true, dataIndex: 'Name' },
{ id: 'Id', header: "Id", width: 200, sortable: true, dataIndex: 'Id' }
]);

var toolbar = new Ext.PagingToolbar({
pageSize: 30,
store: ds,
displayInfo: true,
displayMsg: 'Displaying users {0} - {1} of {2}',
emptyMsg: "No users to display"

})

var grid = new Ext.grid.GridPanel({
id: 'myGrid',
store: ds,
width: 500,
height: 500,
cm: cm,
viewConfig: {
forceFit: true
},
style: 'padding: 10px;',
stripeRows: true,
renderTo: 'divEmployees',

//Paging
bbar: toolbar
});


});

Condor
26 Oct 2010, 12:16 PM
Why are you encoding the parameters? I recommend:

autoLoad: {params:{start:0, limit:30}},

Also, I recommend using the Ext.ux.PagingToolbar that comes with PagingStore, instead of Ext.PagingToolbar (not required, but fixes some bugs).

Woodlander
26 Oct 2010, 10:31 PM
Why are you encoding the parameters? I recommend:

autoLoad: {params:{start:0, limit:30}},Also, I recommend using the Ext.ux.PagingToolbar that comes with PagingStore, instead of Ext.PagingToolbar (not required, but fixes some bugs).

Thank you for your reply!

Removing the Ext.Encode gives me an error: "Invalid JSON primitive" and I think it is because the POST sends the data like this : start=0&limit=30.

Setting autoLoad: true loads the users but with the same problem with all users on one page. The toolbar still shows Page 1 of 35 - Displaying 1 of 1046 users. I replaced Ext.PagingToolbar with Ext.ux.PagingToolbar.

Condor
26 Oct 2010, 10:46 PM
That's because you are setting the header to Content-type:headers:application/json.

Do you actually want to send application/json and not application/x-www-form-urlencoded data?

In that case you should not be doing this by setting the Content-type, but by changing the parameters in the beforeload, e.g.

listeners: {
beforeload: function(store, options) {
options.jsonData = Ext.apply({}, options.params, store.baseParams);
}
}

Woodlander
26 Oct 2010, 11:19 PM
Thanks! Changing the parameters in the beforeload did the trick. :)

buergi
8 Nov 2010, 1:13 AM
Hi Condor!

I use the PagingGroupingStore with over 2000 records and a limit of 50. After filtering I have 900 records left and I need to iterate through every record (or row). What's the best trick to do that?

Condor
8 Nov 2010, 1:39 AM
You mean all filtered records on all pages? Use:

pagingStore.allData.each(function(record){...});

buergi
8 Nov 2010, 2:29 AM
Yep, perfect! You're my localhost hero ;-)

btw: Is there a way to select records on different pages? My selection is gone after a pagechange.

Condor
8 Nov 2010, 2:43 AM
There is a plugin for CheckboxSelectionModel that makes it remember selections across pages (see User Extension forum).

3dm
15 Nov 2010, 4:23 PM
Hi Condor, I think version 0.5 actually 'breakes' all the standard Ext stores.
As far as I can see this is due to the way the constructors of the PaginStores are defined:




Ext.ux.data.PagingJsonStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: Ext.data.JsonStore.prototype.constructor
});
Ext.reg('pagingjsonstore', Ext.ux.data.PagingJsonStore);

This way, when you invoke Ext.reg, Ext.ComponentMgr overrides the xtype of both the PagingStore and the standard Store class with the value of the PagingStore's xtype.
I did not debug further on, but I'm sure that from this point on, all the calls to the Standard Stores methods invoke the corresponding PagingStores functions.

To solve the issue you have to revert to the way version 0.4.1 defines the constructor:



Ext.ux.data.PagingJsonStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(config) {
Ext.ux.data.PagingJsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});

Sorry if this problem has been mentioned in previous posts, but I didn't see a patch...
Hope this can be useful to other users.
Thanks for your work!

aw_zahid
27 Nov 2010, 10:07 PM
Thanks man that worked for me. I am passing some layers and filters to java servlet using an ajax call for each layer. The servlet returns some json that I use as an array store for the grid.

cgi-bin
1 Dec 2010, 11:26 AM
Hello,
First I'd like to thank you for this UX, it has really helped with a few cases that remote paging was impractical.

I'm curious if there will be any "official" update to address a couple of the issues with version 0.5:
1) The incorrect page number when the store is empty ("page 2 of 1") (message #'s 157, 165, 166)
2) The default store classes all seem broken when this UX is loaded (message #'s 164, 167, 181). I also assume that the way the Ext.ux.PagingToolbar is declared, that it also replaces the default PagingToolbar ?

Another issue that I haven't seen mentioned, is that after I load the store, the 1st click on the next page (last page) button of the paging toolbar doesn't advance the page number, however, subsequent clicks work as expected.

Thanks!

cgi-bin
2 Dec 2010, 2:05 PM
Another issue that I haven't seen mentioned, is that after I load the store, the 1st click on the next page (last page) button of the paging toolbar doesn't advance the page number, however, subsequent clicks work as expected.
I've been trying to narrow down why this might be happening...
I am using a PagingJsonStore, autoLoad is false
The store is linked to a gridPanel
there is a top-toolbar with a combobox with the select listener calling store.load and passing params for start, limit, and a custom field with the value of the combobox.
That part is working fine, it submits to the server, reads in the data that is returned and displays it just fine.
However, It seems that the first click on any of the pagingToolbar buttons is issuing a new load(), but without any parameters. (evidence of this in my HTTPD logs seeing a 2nd request to the json data provider, and it throwing errors because of missing parameters)
The existing records are not removed, and no errors or showing up in the browser's error console.
Subsequent clicks to the toolbar buttons work as expected, and are not issuing requests to the server.
Any help or pointers would be appreciated.

Condor
2 Dec 2010, 11:42 PM
As for any PagingToolbar (not just the one from this extension) you need to store any additional parameters besides start, limit, sort and dir in the store baseParams.

thangamalar
3 Dec 2010, 1:56 AM
Hi Condor,

Currently I am using the Paging Store version 0.5 and using the "local" paging as my jsp is on the same server where my ext js code resides. Though the search works fine (using the grid search) ONLY from the first page, when I navigate the page to second or last for example, the search doesn't return any result though the entries are present. Where as if I move back to the first page of the grid, the search works really fine irrespective of the page where the record lives. Is there anything I am missing here to make it work?

I want the search to work from any page and certainly look into all the records of the list and display the data. Currently that happens only if I am in the first page. Please help me out.

cgi-bin
3 Dec 2010, 5:41 AM
As for any PagingToolbar (not just the one from this extension) you need to store any additional parameters besides start, limit, sort and dir in the store baseParams.Technically, baseParams is optional, as I am supplying the additional params in the object supplied to the load() call. That part works perfectly.

The problem isn't that the params aren't being passed, the problem is an extra call to load is being made the 1st time any of the paging buttons are used.

However, I did go ahead and add baseParams to the store, and it STILL calls load(), and dutifully passes the default value that is stored in the baseParams... however by that point it is the WRONG value causing the data in the store that was loaded by my call in the listener of my comboBox to be removed and replaced with the values returned by the extra load().

Maybe this is a clearer explanation of what's happening:
1) Page is rendered. Store is empty (no autoLoad) (baseParams has my custom parameter theState set to 'NY'). Grid is empty (because store is empty). pagingToolbar shows 1 of 1 (buttons are disabled). comboBox has nothing selected.
2) select a value from the comboBox, say Pennsylvania. The select listener fires, which gets the store object as var s, calls "delete s.lastOptions; s.load({params: {start: 0, limit: 25, theState: 'PA'} });"
3) the store correctly calls the back end script which returns the json object with data for PA. The grid displays 25 records as expected. The pagingToolbar shows page 1 of 5 and the next and last buttons are enabled.
4) Click the next button on the toolbar and load() is called, however it submits again to the server, but using the baseParams. The data returned is for NY
5) the store is now loaded with the data for NY, and the toolbar shows page 2 of 7 (more records for NY).
6) clicking any of the toolbar buttons now properly page through the NY data. (no additional submissions to the server are made)
7) if I select any value from the comboBox (except NY) go back to step 2 and repeat. If NY is selected, it seems to know that is what is already loaded, and doesn't re-submit.

Condor
3 Dec 2010, 6:02 AM
No, it's:

//delete s.lastOptions;
s.baseParams.theState = 'PA';
s.load({params: {start: 0, limit: 25}});

- Removing lastOptions is only required to force a reload with unchanged parameters, but since you're already modifying 'theState' it will do a reload anyway.
- 'theState' needs to be in baseParams for it to be sent with the request for the second page.

cgi-bin
3 Dec 2010, 6:14 AM
No, it's:

//delete s.lastOptions;
s.baseParams.theState = 'PA';
s.load({params: {start: 0, limit: 25}});

- Removing lastOptions is only required to force a reload with unchanged parameters, but since you're already modifying 'theState' it will do a reload anyway.
- 'theState' needs to be in baseParams for it to be sent with the request for the second page.Thanks! That solves my problem. However, its really counter-intuitive based on how the documentation is worded.

Grolubao
7 Dec 2010, 2:14 AM
Hi Condor,
Thanks for this great extension! I'm having a slight problem with it though. When I'm loading the store for the first time, it shows incorrectly all the records, although the paging is displayed correctly. If I move to the second page and back to the first it starts to show correctly.



var validatedStore = new Ext.ux.data.PagingJsonStore({
root : 'data',
proxy : new Ext.data.HttpProxy({
url : '<c:url value="/get-validated.json"/>',
method : 'GET'
}),
fields : ['id', 'productFamily', 'allocationFactor', 'ec',
'annuityFactor', 'mvm', 'notApplicable', 'validated',
'validatedBy'],
lastOptions : {
params : {
start : 0,
limit : 10
}
},
listeners : {
load : function(store, records, options) {
if (Ext.isEmpty(records)) {
Ext.popup
.msg(
'Warning',
'<spring:message code="message.missing.operational.risk"/>',
3);
}
}
}
});

var validatedBar = new Ext.ux.PagingToolbar({
pageSize : 10,
store : validatedStore,
displayInfo : true,
displayMsg : 'Displaying {0} - {1} of {2}',
emptyMsg : 'No items to Display'
});


Do you know a fix for this, or am I doing something wrong?

Condor
7 Dec 2010, 5:47 AM
Don't set lastOptions if you are loading remote data.

Where are you loading this store? Are you passing start and limit parameters there?

Grolubao
7 Dec 2010, 5:53 AM
I thought I needed the lastOptions even if the store is remote. The idea was to load all the json but only render part of it and use the toolbar to manage that. I'm loading the store upon the activation of a tab. I'm not passing the start and limit parameters there because I thought that placing them in lastOptions would be enough...

Condor
7 Dec 2010, 6:10 AM
No, you always have to pass start and limit parameters when calling load or reload.

lastOptions is only used when calling loadData or using the data config option (in this case there are no load parameters).

anandhasubha
13 Dec 2010, 2:40 PM
Hi Condor,
Thanks for this great plugin. I have a grid with pagingstore and the Ext.ux.PagingToolbar {Ext.ux.data.PagingStore [v0.5]}. When a filter on the grid returns zero records the activePage is set to 2.
I did change the cursor updating logic as follows and it works fine now. I did replace (t+1) with t.

if (this.cursor >= t) {
this.cursor = Math.ceil((t) / s) * s;
}
Is there any logic within the toolbar that might get affected from this change?

Thank you,
Subha.

christian130
15 Dec 2010, 6:00 AM
man ur plugin looks and is awesome but when i'm trying to reload data automatically without clicking on the refresh button the grid does not scroll. The user have to reload the grid using the button "refresh" instead of the dom make it automatically. I'll put some images for u to watch my problem is http://img130.imageshack.us/img130/8139/pantallazo3c.png (http://img130.imageshack.us/i/pantallazo3c.png/)

Uploaded with ImageShack.us (http://imageshack.us)
http://img258.imageshack.us/img258/8711/pantallazo2y.png (http://img258.imageshack.us/i/pantallazo2y.png/)

Condor
15 Dec 2010, 7:40 AM
So how are you reloading the store?

christian130
16 Dec 2010, 8:30 AM
i'm trying to make like this:
ds_random_employee_data_active2.load({ params:{myGet:'what ever'}});


var proxy4= new Ext.data.HttpProxy({
// this json data contains only employees where active is 'true'
url:vbase+"index.php/mensajeAjax/obtenerRegistros/",
method:'GET'


});

var rd_random_employee_data2 = new Ext.data.JsonReader({}, ['id',
{ name: 'fecha', type: 'date', dateFormat: 'Y-m-d'}, 'titulo', 'tecnica', 'medidas', 'modingr', 'valor', 'stdobra', 'ubicacion', 'departamento', 'responsable', 'piso', 'observaciones', 'autor', 'acc']);
var ds_random_employee_data_active2 = new Ext.ux.data.PagingStore({
proxy: proxy4,
reader: rd_random_employee_data2,
lastOptions: {
params: {
start: 0,
limit: 3
}
}
});
var myPageSize = 10;
grid2 = new Ext.grid.GridPanel({
frame: true,
store: ds_random_employee_data_active2,
bbar: new Ext.PagingToolbar({
store: ds_random_employee_data_active2,
// grid and PagingToolbar using same store
displayInfo: true,
pageSize: myPageSize,
prependButtons: true,
items: ['&nbsp;']
}),
columns: [
{header: 'Fecha', width: 65,sortable: true, dataIndex: 'fecha',xtype:'datecolumn',format:'d/m/Y'},
{header: 'Titulo', width: 200,sortable: true, dataIndex: 'titulo'},
{header: 'Modo de Ingreso', width: 100,sortable: true, dataIndex: 'modingr'},
{header: 'Valor', width: 80,sortable: true, dataIndex: 'valor'},
{header: 'Ubicacion', width: 80,sortable: true, dataIndex: 'ubicacion'},
{header: 'Responsable', width: 80,sortable: true, dataIndex: 'responsable'},
{header: 'Autor', width: 100,sortable: true, dataIndex: 'autor'},
{header: 'Acciones', width: 120,sortable: true, dataIndex: 'acc'}],
height: 200,
width: 855,
renderTo: 'buscardatadsc'
// config options for stateful behavior
});

Condor
16 Dec 2010, 10:55 AM
Don't use lastOptions for remote stores.

Put extra parameters in the store baseParams and only load the store with start and limit parameters.

David Warren
16 Dec 2010, 10:57 AM
Condor,
I agree with Anand: thank you for the wonderful plugin. I encountered the same issue as Anand when my store has zero or one records. There are some cases where I clear out the store and add a record to it. When I do that, the toolbar displays "Record 2 of 1" after clearing the store, and "Record 3 of 1" after adding a record to it. Rather than altering the formula in onChange which sets this.cursor, I added an if statement to make sure the cursor is never greater than the total:
Code:

onChange : function() {
// *** add ***
var t = this.store.getTotalCount(), s = this.pageSize;
if (this.cursor >= t) {
this.cursor = Math.ceil((t + 1) / s) * s;
}
//If cursor is still > total after the formula, set it to total count
if(this.cursor >= t){
this.cursor = t;
}


After doing this, the toolbar seems to work for me for all cases (0, 1, or many records in my store).

christian130
16 Dec 2010, 11:42 AM
Don't use lastOptions for remote stores.

Put extra parameters in the store baseParams and only load the store with start and limit parameters.

very very thanks! aparently it worked for me. I remove the lastoption and when i call the store i send the parameters start and limit. But i have a question, when try to load a store and i gave a STRING limit parameters it doesnt show properly. I have to send the limit and start like INTEGER format like this:
store.load({params:{start:0,limit:10}});
instead of

store.load({params:{start:'0',limit:'10'}});

for now everything goes fine! :)

Condor
16 Dec 2010, 11:15 PM
Yes, 'start' and 'limit' are integer parameters (both PagingStore and PagingToolbar do some math with them).

diablo
21 Dec 2010, 1:44 AM
hi Condor,

I have the following situation. A tab panel that holds 2 grids, one using pagingstore and the other one normal store. When I am accessing functions (i.e. loadRecords() ) for the grid with normal store, the store is a instance of PagingStore, used in the first grid. Is there a way to avoid this? Comes this from that PagingStore extends Store?

Thanks!

Condor
21 Dec 2010, 2:23 AM
Yes, v0.5 creates PagingJsonStore etc. wrong, which in turn affects Ext.data.Store. I still need to create a v.0.5.1 for that...

If you're in a hurry: the fix is somewhere in this thread.

diablo
21 Dec 2010, 3:00 AM
Yes, v0.5 creates PagingJsonStore etc. wrong, which in turn affects Ext.data.Store. I still need to create a v.0.5.1 for that...

If you're in a hurry: the fix is somewhere in this thread.

thanks for the quick reply. If you are referring to the solution povided by @3dm with reverting to constructor to v0.4.1 i have tried it but unfortunatly it doesn't work for me.

Condor
21 Dec 2010, 4:09 AM
thanks for the quick reply. If you are referring to the solution povided by @3dm with reverting to constructor to v0.4.1 i have tried it but unfortunatly it doesn't work for me.

Yes, that was the fix I was referring to.

If that doesn't help you must be having a different problem. Can you post an example?

diablo
3 Jan 2011, 12:39 AM
Yes, that was the fix I was referring to.

If that doesn't help you must be having a different problem. Can you post an example?

Hi Condor. Sorry for the late response. In my case made more sense to switch the first grid to use also a api store.

walldorff
6 Jan 2011, 6:03 AM
Thank you Condor, for the work and effort put in this great extension. Wish you a successful 2011 !

Roland

colinm
13 Jan 2011, 8:55 AM
Hello,
this extension is very nice .... easy to use .. i guess perfect ... but i got the following problem: when i press the next page in the pagingtoolbar, the next values appear correctly still, the Loading AlertBox doesn't disappear and freeze the screen.

Here is my code, first I define a grid having a tolbar:


OriginalGridTab = Ext.extend(Ext.grid.GridPanel, {
bbar : [],
initComponent: function(){
Ext.apply(this, { });
OriginalGridTab.superclass.initComponent.apply(this, arguments);
var ptb= new Ext.ux.PagingToolbar({
pageSize: 10,
store: this.store,
displayInfo: true,
displayMsg: 'Assays displayed {0} - {1} of {2}',
emptyMsg: "No assays to display"
});
this.getBottomToolbar().add(ptb);
}
});

and here i create it:


var ds = new Ext.ux.data.PagingArrayStore({
fields : keysamples,
data : datasamples ,
lastOptions: {params: {start: 0, limit: 10}}
});
var origgrid = new OriginalGridTab({ store : ds, cm : cm, viewConfig: { forceFit:true },loadMask:true});


as i said, everything is working fine (and if i removed the paging stuff, it works perfectly ... but too slow so i need it) except when i press the next button.
the debugger gives me the following exception:



Uncaught TypeError: Cannot call method 'child' of undefined
setLink Exporter-all.js:157
EXTUTIL.Event.fire ext-all-debug.js:310
EXTUTIL.Observable.fireEvent ext-all-debug.js:54
(anonymous function) PagingStore.js:168
(anonymous function)ext-base.js:7


which refers to the line 168 in PagingStore which is the following:


this.fireEvent("load", this, r, options);


Can anyone help me?
thx
colin

Condor
13 Jan 2011, 10:31 AM
It says the error is on line: setLink Exporter-all.js:157

I have no idea what that code is.

colinm
13 Jan 2011, 12:48 PM
thanks for the fast reply ...
indeed, someone tested the Exporter-all.js script (this provides functionality to export grid store to excel like format). Well apparently that script was not working so well and was no longer used ... .but still loaded ...
i removed it and everything works fine ...
thx again for your extension and happy new year

colin

sothea
13 Jan 2011, 7:05 PM
I have many tabs. Each tabs has the same grid view with the condition of all tabs. When I Click next page the result load the wrong result for me, It take only first tab condition. This is my code

items:[Ext.getCmp(treeid),{
id:listsocid,
title:'<b>Voir les sociétés</b>',
layout: 'fit',
baseCls:'x-panel-accordion',
headerCssClass:'accordion',
items: new Ext.grid.GridPanel({
id:tableftid,
store: ds_soc,
loadMask: true,
columns: [
{id:'id',header: "N° Soc", width: 60, sortable: true,menuDisabled: true, dataIndex: 'societe_id'},
{header: "Raison Sociale", width: 200, sortable: true,menuDisabled: true, dataIndex: 'raison'},
{header: "Code Postal", width: 90, sortable: true,menuDisabled: true, dataIndex: 'copost'}
],
stripeRows: true,
height:350,
width:200,
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds_soc,
displayInfo: true,
displayMsg: ' {0} - {1} sur {2} ',
emptyMsg: "rien à afficher"
})
}),
border:true,
listeners: {
'expand': function(e) {
ds_soc.removeAll();
ds_soc.baseParams.cible_active = Ext.getCmp(treeid).getId().charAt(4);
ds_soc.baseParams.nbre_cibles = index;
ds_soc.baseParams.nodes_C1 = SelectedNodes("tree1","Cible 1");//tab1 condition
ds_soc.baseParams.nodes_C2 = SelectedNodes("tree2","Cible 2");//tab2 condition
ds_soc.baseParams.nodes_C3 = SelectedNodes("tree3","Cible 3");
ds_soc.baseParams.nodes_C4 = SelectedNodes("tree4","Cible 4");
alert(ds_soc.getTotalCount()+" : "+SelectedNodes("tree1","Cible 1")+" : "+SelectedNodes("tree2","Cible 2"));

ds_soc.load({
params: {
//nbre_nodes: node.hasChildNodes(),
nbre_cibles: index,
start:0,
limit:25,
cible_active: Ext.getCmp(treeid).getId().charAt(4),
nodes_C1: SelectedNodes("tree1","Cible 1"), nodes_C2: SelectedNodes("tree2","Cible 2"),
nodes_C3: SelectedNodes("tree3","Cible 3"), nodes_C4: SelectedNodes("tree4","Cible 4"),
operateur1: operateur[1], operateur2: operateur[2], operateur3: operateur[3], operateur4: operateur[4]
},
callback: function(){
nbre_total = ds_soc.getTotalCount();
}
}); //End ds_soc.load
} //End expand function
}, //End listener
}]

mond
24 Jan 2011, 5:37 PM
Hi Condor, I try your Extension and it run as expected but when i save it to the server it only store the current page not the whole data. anyone encountered this case?

Condor
24 Jan 2011, 11:34 PM
How are you saving it to the server?

ps. Remember that if you want to collect the store data you have to access the 'allData' property instead of the normal methods.

mond
24 Jan 2011, 11:37 PM
allData? i didnt aware about this property. how to code this property?

Condor
24 Jan 2011, 11:42 PM
A Store has a 'data' and a 'snapshot' property. 'data' is a MixedCollection containing the currently visible (filtered) records and 'snapshot' is a MixedCollection containing all unfiltered records.

In a PagingStore 'data' only contains the records for the current page and the 'allData' MixedCollection contains the records for all pages.

mond
24 Jan 2011, 11:52 PM
what should i set to the property? allData is true?

Condor
25 Jan 2011, 12:12 AM
Huh? You shouldn't 'set' allData at all; only read it.

I meant you can collect all record data using something like:

var data = [];
store.allData.each(function(rec){
data.push(rec.data);
});

mond
25 Jan 2011, 7:56 PM
im using store.loadData([]);

allData is already in store property?

teddyjas
27 Jan 2011, 8:40 PM
Hi condor,

I'm using your paging store plugin for my grid.
I've small issue here.

Say I have 3 pages of data (10 rows per page) and I'm at page 1. I then delete the last row in the first page.
When I do that, there are 9 rows in first page.
Is there anyway I can rearrange again the rows so that rows from the next page fill up the first page etc?

thanks

Condor
27 Jan 2011, 11:59 PM
Call:

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

teddyjas
28 Jan 2011, 1:14 AM
Call:

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

thanks condor,

I've tried that but i still have some issue.
I have 11 records, paging is set 10 records per page.
so on page 1 I have records 1-10 and page 2 I have 1 records.

the store's allData contains 11 records


ds.removeAt(0);
ds.applyPaging();
ds.fireEvent('datachanged', ds);


when I execute the code above to remove one of the record, not only that record is deleted, but also the last record on page 2.
so now the store's allData contains 9 records...

I'm still checking why is that so...?

teddyjas
28 Jan 2011, 2:05 AM
in pagingstore's applyPaging function:


var allData = this.data,
data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey)


if I change that to:


var allData = (!this.allData) ? this.data : this.allData,
data = new Ext.util.MixedCollection(allData.allowFunctions, allData.getKey)


that seems to solve the issue, but I havent test on more records yet.

Condor, do you think is the issue?

Arindam Das
30 Jan 2011, 9:46 AM
2. You would have to write some extra code for that.
- Detect if a load needs data that hasn't been loaded yet.
- Load the extra data using an Ajax request and create records from it using the reader.
- Join the records to the store and add them to allData.
- Apply paging and fire a datachanged event.
Condor,
Is this already done in another component? If not do you mean to say that I write the above extra code modifying your paging store or should I start fresh by extending the Store itself.

Thanks for the great work =D>

kent78
31 Jan 2011, 12:56 PM
Hi.

I´m trying to make it possible for the user to change the pagesize by clicking a series of buttons.
(To show 10 or 100 rows at a time).

Can anyone help with a solution that makes it possible to change the grids pagesize without
fetching the data over again with this component. I've tried:


pagingToolbar.pageSize = 10;
pagingToolbar.doRefresh();Seems that doRefresh create a new request to the server (fetches the data all over again).

All the data that I´m interested in is allready present in the PagingStore.
So this would be a good feature and would keep the number of requests down on the server side.

Any hints would be appreciated. Thx!

Condor
31 Jan 2011, 11:35 PM
Changing the pageSize should force a new server request. Are you sure that is the only thing you are changing?

kent78
1 Feb 2011, 6:24 AM
The code below seems to do what I needed. IE. changing the number of rows shown per page without any new server requests.



function btnClicked (numberOf){
var theStore = Ext.StoreMgr.lookup('paging-grid-store');
theStore.load({params: {start: 0, limit: numberOf}});
};
var HundredBtnClickHandler = function (){ btnClicked(100); };
var TwentyFiveBtnClickHandler = function (){ btnClicked(25); };
var TenBtnClickHandler = function (){ btnClicked(10); };

Condor
1 Feb 2011, 6:30 AM
Yes, but you still need to update the pagingstore pageSize, because clicking on the next or previous button would show the wrong number of records.

kent78
1 Feb 2011, 6:38 AM
True. I just noticed that myself and was about to edit my last post. ;) Thanks.

kent78
1 Feb 2011, 7:32 AM
Here is the code, just for reference:


function btnClicked (numberOf){
var pagingToolbar = Ext.getCmp('local-gridpanel-pagtbar'),
theStore = Ext.StoreMgr.lookup('paging-grid-store');
if(numberOf === -1){ numberOf = theStore.getTotalCount(); }
pagingToolbar.pageSize = numberOf;
theStore.load({params: {start: 0, limit: numberOf}});
};
var TwentyFiveBtnClickHandler = function (){ btnClicked(25); };
var TenBtnClickHandler = function (){ btnClicked(10); };
var AllBtnClickHandler = function (){ btnClicked(-1); };

MarceloCajr
1 Feb 2011, 9:46 AM
Condor... Sorry about my question but i don't understand how to implement the Paging method...
Look my Logic
1 - Get the remoteData...
2 - Mount a LocalData with remote data
3 - use the local data to generate de grid.
4 - Do pagination and filter.

What i'm trying to do to get remote data is:

var store = new Ext.ux.data.PagingArrayStore({
fields: [...],
url: 'resultarea.action',
autoLoad: {params: {start: 0, limit: 10}}
});

Its correct?

Tks for all help

elbino
2 Feb 2011, 2:19 AM
Hallo there,

I am using the PagingStore-plugin, version 0.4.1 (because I have to use ExtJS in version 3.1.1). Works great except of the refresh button. Well, clicking the refresh button just does nothing. Do I have to customize the plugin somehow? Maybe the whole grid I am working on is implemented in a bad way and the button does what it should. I was not able to find a solution so far.

Thanks & greetings
elbino

Condor
2 Feb 2011, 2:40 AM
Did you apply the PagingToolbar override mentioned in the first post?

elbino
2 Feb 2011, 2:50 AM
I tried. But seems I've done it wrong. The original code is:


...
doRefresh: function () {
// *** add ***
delete this.store.lastParams;
// *** end ***
this.doLoad(this.cursor);
},
...

When using the override it looks like this?


...
Ext.override(Ext.PagingToolbar, {
doRefresh: function () {
// *** add ***
delete this.store.lastParams;
// *** end ***
this.doLoad(this.cursor);
}
}),
...

Well, this brings up an error in firebug:
"missing : after property id
chrome://firebug/content/blank.gif Ext.override(Ext.PagingToolbar, {"

Condor
2 Feb 2011, 2:56 AM
That's wrong.

The PagingStore v0.5 code contains an Ext.ux.PagingToolbar component. If you're using that then you don't need any override.

Otherwise that override don't go inside the PagingStore code. It's separate.

elbino
2 Feb 2011, 3:08 AM
Ah, I recognized that the PagingStore v0.5 code is already used. Hmm, seems that the implementation of the grid I am working on is not very good. :-( (I was not the one who implemented it. Therefore I do not know why the button does not work in my case.)

msmolyak
10 Feb 2011, 8:10 AM
In my application I am trying to coordinate the display of two grids: the first one requests data from the server, displays them and allows the suer to paginate through them. The grid uses standard JsonStore. The server returns 100 records per page.

The second grid should allow the user to iterate only through 100 records displayed in the first grid (it displays images related to these records). I am trying to use PagingJsonStore described here.

As soon as I include the source for PagingStore.js (I downloaded from the this post) into my application, the pagination of the original grid stops working. It appears that the simple act of making the new subclass of the store and/or paging toolbar available to ExtJS makes it use it. The manifestation of that problem is that the first grid tells me that there are only 100 records and thus displays a single page in the grid disabling pagination buttons. (the behavior I would expect from PagingStore/PagingToolbar). As soon as I remove the include statement for PagingStore.js, the first grid works fine, displaying the correct number of records found by the server and allowing me to paginate through them. How do I prevent the newly imported classes from having effect on the existing code?

Thank you,

Michael

Condor
11 Feb 2011, 1:53 AM
PagingStore creates PagingJsonStore, PagingArrayStore and PagingXmlStore incorrectly thereby breaking JsonStore, ArrayStore and XmlStore.

The fix for this is mentioned somewhere in this thread.

I still have to post a v0.5.1 version that fixes this bug and the page numbering bug in the toolbar.

Pattie
28 Feb 2011, 5:41 AM
Man, after hours of searching and programming, I found this thread.
This has been the solution , so thanks!!

incanus
15 Mar 2011, 8:44 AM
Hi, I have one problem. When i change from one page to another, i got the load event of the store fired. I think it's not correct.

My entire problem description is here:

http://www.sencha.com/forum/showthread.php?126871-PagingStore-with-GridFilters-and-PagingToolbar&p=580748#post580748

Thanx in advance, i'll appreciate any help!

I got it! i'll explain it in the other post (follow the previous link)

renaudham
22 Mar 2011, 3:51 AM
Hello

I see mentioned in the Extjs4 new doc, a link to this post.
Is there anything in plan for ExtJs4, how can we use it?

Sorry if the answer is already somewhere, 8 pages of replies is hard to follow.

Thanks

eashwaranp
29 Mar 2011, 12:29 PM
I ran into the same problem as msmolyak above. My page has 2 grids. One uses JsonStore, and one uses this PagingArrayStore. The PagingStore.js seems to 'replace' the Ext.data.*Store code just like you mention here.

I saw how the constructor for the 4 extension were assigned to their Ext.data.*Store counterparts. I felt this could be a cause. I replaced these constructor assignments with functions that call the respective Ext.data.*Store constructors. This seems to work. This could be because a new object is returned with the constructor function this way.
Here is the fix. It may be incomplete in some respects, but it seems to fix the current issue:


Ext.ux.data.PagingDirectStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.DirectStore.prototype.constructor.call(this);
}
});
Ext.reg('pagingdirectstore', Ext.ux.data.PagingDirectStore);

Ext.ux.data.PagingJsonStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.JsonStore.prototype.constructor.call(this);
}
});
Ext.reg('pagingjsonstore', Ext.ux.data.PagingJsonStore);

Ext.ux.data.PagingXmlStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.XmlStore.prototype.constructor.call(this);
}
});
Ext.reg('pagingxmlstore', Ext.ux.data.PagingXmlStore);

Ext.ux.data.PagingArrayStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.ArrayStore.prototype.constructor.call(this);
},
loadData: function (data, append) {
if (this.expandData === true) {
var r = [];
for (var i = 0, len = data.length; i < len; i++) {
r[r.length] = [data[i]];
}
data = r;
}
Ext.ux.data.PagingArrayStore.superclass.loadData.call(this, data, append);
}
});
Ext.reg('pagingarraystore', Ext.ux.data.PagingArrayStore);

parnold3
4 Apr 2011, 5:39 AM
I ran into the same thing. I'm not sure if it is correct or not to call the prototype's constructor method. I think with the constructor, you can just call:

Ext.ux.data.PagingDirectStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.DirectStore.call(this);
}
});
Ext.reg('pagingdirectstore', Ext.ux.data.PagingDirectStore);

Ext.ux.data.PagingJsonStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.JsonStore.call(this);
}
});
Ext.reg('pagingjsonstore', Ext.ux.data.PagingJsonStore);

Ext.ux.data.PagingXmlStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.XmlStore.call(this);
}
});
Ext.reg('pagingxmlstore', Ext.ux.data.PagingXmlStore);

Ext.ux.data.PagingArrayStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(){
Ext.data.ArrayStore.call(this);
},
loadData: function (data, append) {
if (this.expandData === true) {
var r = [];
for (var i = 0, len = data.length; i < len; i++) {
r[r.length] = [data[i]];
}
data = r;
}
Ext.ux.data.PagingArrayStore.superclass.loadData.call(this, data, append);
}
});
Ext.reg('pagingarraystore', Ext.ux.data.PagingArrayStore);

This seems to work and seems simpler. However, both may work fine (I would be interested to hear if anyone has any insight into which one is "correct").

knackwurst
12 Apr 2011, 12:39 PM
Hey!

Thanks for this plugin, we seem to be missing only one last part. We're using the PagingJsonStore with a set of filters controlled by the store's filterBy function. Changing the filters successfully retrieves filtered results but only for the first page of results. When we move to a different page through the paging toolbar, our filters are lost and its displays whatever the unfiltered second page of results would have been.

Any help would be greatly appreciated.

Thanks again!

Sesshomurai
22 Apr 2011, 1:43 PM
The workaround post above also does not work because the config is not passed in the constructor call, so I remedied that with:



Ext.ux.data.PagingJsonStore = Ext.extend(Ext.ux.data.PagingStore, {
constructor: function(config){
Ext.data.JsonStore.prototype.constructor.call(this,config);
}
});

Joe Kuan
27 Apr 2011, 1:11 AM
FYI, I think there is a conflict between Ext.ux.PagingToolbar and Ext.PagingToolbar code. Even if I don't use any ux classes but include the PagingStore source in my html file, my Ext.PagingToolbar code does not working anymore.

As soon as I removed the include, everything works fine.

PagingStore v0.5 and ExtJS 3.2.1

Thanks
Joe

StanimirPanchev
29 Jun 2011, 4:49 AM
Can I use this with Ext 4 because i have a problem with paging local data.

blakel
11 Jul 2011, 6:34 AM
There seems to be a problem when using Ext.ux.data.PagingStore with a Ext.ux.PagingToolbar when you never call the load function directly. I have a page where I only call the store's add method to add records. Initially when the page loads there are no records in the store, they are only added when the user presses a button.

In this case the current page number and the displayInfo are incorrect.

This is what I did to fix this problem:

Add a constructor for Ext.ux.data.PagingStore:



constructor: function(config) {
this.totalLength = 0;
Ext.ux.data.PagingStore.superclass.constructor.call(this, config);
},
At the beginning of the Ext.ux.PagingToolbar's onChange method:

Change:


if (this.cursor >= t) {
this.cursor = Math.ceil((t + 1) / s) * s;
}
To:


if (this.cursor >= t && this.cursor > 0) {
this.cursor = Math.ceil((t + 1) / s) * s;
}

dsk1962
20 Jul 2011, 6:36 AM
PagingStore is a pretty useful extension. Will it be available in version4? I saw other people have same question.

atul.sachan@capgemini.com
24 Oct 2011, 4:06 AM
Hi, I am using 'Ext.ux.data.PagingStore' component and trying to migrate from Ext3.2.1 to Ext 4 during migration i am getting an error 'records[i].join is not a function'. Some can provide any solution for the same please??
Thanks,
At

Buzzwords
3 Nov 2011, 6:26 PM
Does anyone know if there is a port of Ext.ux.data.PagingStore for Extjs 4x?