PDA

View Full Version : Extjs tree grid paging toolbar with remote store



amitkumarchauhan
15 May 2012, 5:47 AM
Is it possible for tree grid, which is not lazy loaded to fetch records using paging toolbar with store getting loaded from url?
If yes , please share code/working url for same.

scottmartin
15 May 2012, 6:22 AM
TreeStore does not support paging at this time.

Regards,
Scott.

amitkumarchauhan
15 May 2012, 6:35 AM
Any workaround or alternative to perform that?
Also any plans to implement pagination in treestore in coming extjs releases?

scottmartin
15 May 2012, 9:27 AM
It has been discussed, but I am not aware of the progress.

Scott.

amitkumarchauhan
15 May 2012, 8:09 PM
k...can you share any forum link where it has been discussed or any other thread where i can request such info?

scottmartin
16 May 2012, 4:28 AM
The discussion is internal at this point.

Scott.

amitkumarchauhan
20 May 2012, 7:54 PM
Scott, when can we expect official word regarding same from extjs?

scottmartin
21 May 2012, 6:13 AM
I do not have any additional information, sorry.

Scott.

amitkumarchauhan
21 May 2012, 6:57 AM
I am asking this because i have to implement certain functionality which can be switched from normal grid to tree grid & data is too large say around 10,000 to 30,000 items; normal grid supports pagination which is excellent but tree grid is missing pagination feature hence my project is completely stuck because of that.
Can you message me or post profile id/email id of person who can share more details?

Lim, Euncheon
18 Sep 2012, 6:32 AM
This is not a definitive answer for this question. However, someone will get help from this workaround. This problem is related to the Store.
You need to define a replica of Ext.data.Store.
Note : the namespace could be modified. You have to assign proxy.reader in children instance of following TreeGridStore.

Ext.define("TREEGRIDS.store.TreeGridStore", { extend : "Ext.data.TreeStore",
getTotalCount : function() {
if(!this.proxy.reader.rawData) return 0;
this.totalCount = this.proxy.reader.rawData.totalCount;
return this.totalCount;
},
getStore : function() {
return this;
},
currentPage : 1,
clearRemovedOnLoad: true,
clearOnPageLoad : true,
addRecordsOptions: {
addRecords: true
},
loadPage: function(page, options) {
var me = this;


me.currentPage = page;


// Copy options into a new object so as not to mutate passed in objects
options = Ext.apply({
page: page,
start: (page - 1) * me.pageSize,
limit: me.pageSize,
addRecords: !me.clearOnPageLoad
}, options);


if (me.buffered) {
return me.loadToPrefetch(options);
}
me.read(options);
},
nextPage: function(options) {
this.loadPage(this.currentPage + 1, options);
},
previousPage: function(options) {
this.loadPage(this.currentPage - 1, options);
},
loadData: function(data, append) {
var me = this,
model = me.model,
length = data.length,
newData = [],
i,
record;


for (i = 0; i < length; i++) {
record = data[i];


if (!(record.isModel)) {
record = Ext.ModelManager.create(record, model);
}
newData.push(record);
}


me.loadRecords(newData, append ? me.addRecordsOptions : undefined);
},
loadRecords: function(records, options) {
var me = this,
i = 0,
length = records.length,
start,
addRecords,
snapshot = me.snapshot;


if (options) {
start = options.start;
addRecords = options.addRecords;
}


if (!addRecords) {
delete me.snapshot;
me.clearData(true);
} else if (snapshot) {
snapshot.addAll(records);
}


me.data.addAll(records);


if (start !== undefined) {
for (; i < length; i++) {
records[i].index = start + i;
records[i].join(me);
}
} else {
for (; i < length; i++) {
records[i].join(me);
}
}


/*
* this rather inelegant suspension and resumption of events is required because both the filter and sort functions
* fire an additional datachanged event, which is not wanted. Ideally we would do this a different way. The first
* datachanged event is fired by the call to this.add, above.
*/
me.suspendEvents();


if (me.filterOnLoad && !me.remoteFilter) {
me.filter();
}


if (me.sortOnLoad && !me.remoteSort) {
me.sort(undefined, undefined, undefined, true);
}


me.resumeEvents();
me.fireEvent('datachanged', me);
me.fireEvent('refresh', me);
},
clearData: function(isLoad) {
var me = this,
records = me.data.items,
i = records.length;


while (i--) {
records[i].unjoin(me);
}
me.data.clear();
if (isLoad !== true || me.clearRemovedOnLoad) {
me.removed.length = 0;
}
},
});
Then this is an example of a child instance of TreeGridStore. Be careful of using extend attribute!

Ext.define("TREEGRIDS.store.ParentTreeGrid", { extend : "TREEGRIDS.store.TreeGridStore",
model : "TREEGRIDS.model.ParentTreeGrid",
pageSize : 10,
autoLoad : false,
proxy : {
type : "ajax",
api : {
read : "dispatcher/TreeGrid/read",
create : "dispatcher/TreeGrid/write",
update : "dispatcher/TreeGrid/update",
destroy : "dispatcher/TreeGrid/delete"
},
extraParams : {
fields : '["userName","title"]'
},
reader : {
type : "json",
totalProperty : "totalCount",
root : "children",
successProperty : "success"
},
writer : {
type : "json"
}
}
});
In my case, it worked!

immobilia
7 Dec 2012, 9:44 AM
Very good job Lim, i have try it successfully, exception one thing :

When you change page with paging, checkbox doesn't render (un)checked.

On first load, checkbox renderer correctly, on click checkbox is show as checked, and click again checkbox is show as unchecked.
But if you pagging to another page, you can check checkbox,
it's save in the store,
but not renderer...
... also, all renders seems bad,
for example click on expand item doesn't work...

An idea ?...

A bad workaround because it relaod all the grid, is using


treegrid.on({
checkchange: function( node, checked, eOpts ) {
console.log("(un)checking", node, checked, eOpts);
tree.getView().refresh();
tree.getView().refreshNode( 0 ); // seem's not working : correctly calling my columns.treecolumn.renderer, but not enable visual checkbox
}
});

or for solve checkable and expandable (but i's always refresh grid twice) :


treegrid.on({
'load':{
fn: function(){
console.log("On treeGrid load");

tree.show();
tree.getView().refresh(); // PATCH item expand, checkbox

console.timeEnd("timing foo");
},
scope:this
}
});

kamalshahu
26 May 2013, 1:50 AM
Hi,
Can we implement paging similar to gridpanel in tree panel(multiple columns)using ext js 4.2.1?
if yes,Then please provide me some reference and working example .because in my project i need paging similar to grid in treepanel.

Thanks
kamal

wijnruit
15 Aug 2013, 9:30 AM
I create grid in tree , It render record count match pageSize But page not active,
and when I mouse over grid, It happen error in browser console "Uncaught TypeError: Cannot read property 'processEvent' of undefined"
Table.js?
HelpMe Please


45379

super.rotus
12 Feb 2014, 10:32 AM
Hi everyone, i'm trying this, and it doesnt work :/
I'm trying only to paginate the first nodes... the child nodes are called only when you expand the items, so it wont be usefull to paginate everything.

My question is why does the treepanel doesnt paint anything after calling
grid.getDockedComponent('toptoolbar').doRefresh( );

Or maybe the best option is override all the dock component?
Regards.

enigma387
8 Oct 2014, 2:37 AM
:((I tried remote pagination on treegrid using Ext JS 4.2.1 version. I ran into following error:
"TypeError: b.getTotalCount is not a function" when trying. All I did is create a model, a store with proxy and then panel. My complete data is getting rendered instead of being paginated.
I even tried using the code which is mentioned in Thread above. This did not work as well. I faced other issues i.e.
"Uncaught TypeError: Cannot read property 'getProxy' of undefined"

I want to know if treegrid supports Remote pagination in ext 4.2? If yes, then how to?

enigma387
8 Oct 2014, 2:40 AM
:((I tried remote pagination on treegrid using Ext JS 4.2.1 version. I ran into following error: "TypeError: b.getTotalCount is not a function" when trying. All I did is create a model, a treestore with proxy containing json data and then panel for treegrid. My complete data is getting rendered instead of being paginated i.e. instead of me specifying page limit as 2 it shows complete 9 record data.

I even tried using the code which is mentioned in Thread above. But it did not work as well. I faced other issues i.e. "Uncaught TypeError: Cannot read property 'getProxy' of undefined" is the error seen upon using that code. I might be missing something since I am quite new to EXT JS.

All I want to know if treegrid supports Remote pagination in ext 4.2? If yes, then how to?