View Full Version : Paging toolbar for ExtJS TreePanel

14 Feb 2013, 11:22 PM

I have used Ext.tree.TreePanel to display data (like a grid panel) and that contains huge records.

I'm NOT sure if we can implement pagination for TreePanel. I tried using the pagingtoolbar somehow it is throwing exception.

Please let me know if there is any way to implement pagination for TreePanel

17 Feb 2013, 8:29 AM
The tree does not support paging.

9 Apr 2013, 7:16 AM
I just extend treestore with methods of store, so it now support pagging toolbar as well it support gridpanel

extend: 'Ext.data.TreeStore',
load:function (options) {
options = options || {};
options.params = options.params || {};
var me = this,
node = options.node || me.tree.getRootNode(),
if (!node) {
node = me.setRootNode({
expanded: true
}, true);
if (me.clearOnLoad) {
if(me.clearRemovedOnLoad) {
me.tree.un('remove', me.onNodeRemove, me);
me.tree.on('remove', me.onNodeRemove, me);
Ext.applyIf(options, {
node: node
options.params[me.nodeParam] = node ? node.getId() : 'root';
if (node) {
node.set('loading', true);
return me.callParent([options]);
onProxyLoad: function(operation) {
var me = this,
resultSet = operation.getResultSet(),
successful = operation.wasSuccessful(),
records = operation.getRecords(),
node = operation.node;

me.totalCount = resultSet.total;

me.loading = false;
node.set('loading', false);
if (successful) {
records = me.fillNode(node, records);
// deprecate read?
me.fireEvent('read', me, operation.node, records, successful);
me.fireEvent('load', me, operation.node, records, successful);
//this is a callback that would have been passed to the 'read' function and is optional
Ext.callback(operation.callback, operation.scope || me, [records, operation, successful]);

getTotalCount: function() {
return this.totalCount
// pageSize:10,
loadPage: function(page, options) {
var me = this;
options = Ext.apply({}, options);
me.currentPage = page;
me.read(Ext.applyIf(options, {
page: page,
start: (page - 1) * me.pageSize,
limit: me.pageSize,
addRecords: !me.clearOnPageLoad
nextPage: function(options) {
this.loadPage(this.currentPage + 1, options);
previousPage: function(options) {
this.loadPage(this.currentPage - 1, options);
var me = this;

6 Nov 2013, 4:17 AM
Hi Galahed,

Can you please elaborate what to do with this code. How I can use your code to associate the paging toolbar with the tree panel.

6 Nov 2013, 11:25 PM
Hi, you can freely instantiate from this class just like from regular TreePanel, and when you configure store - it will be automaticaly use my class.
Something like this example from http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.tree.Panel
(http://docs.sencha.com/extjs/4.1.1/#!/api/Ext.tree.Panel)with regular use paging toolbar plugin

I assemble example for you, bot before pair words of disclaimer:
1. I use some data provider from secnha.com, so when you will try my example, you should close all windows of your chrome and restart it from command line:

chrome.exe --disable-web-security
it will disable restriction for same origin of source page and XHR (ajax) requests
or you need provide data by yourself for this example, then you no need this point

2. Their data provider do not wait for "page" query param, so it give us all amount data each time. But as you can see in console, request will be correct, and if you use your own data provider, and correct parse and deal with pages, it will be correct show page's data for you

Use this code just right after definition code, i wrote before

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,

rootVisible: false,
renderTo: Ext.getBody(),
xtype : 'pagingtoolbar',
var grid=t.up('grid')?t.up('grid'):t.up('treepanel')


If you do well, you see these requests:

so, as you can see it will be correct use both - nested node loading and paging for 1 level of tree (often it enough for data like "forest", when you have great number small trees).

Best regards and feel free ask if i can help you
ps. sorry for my poor english

14 Feb 2014, 11:16 AM
I resolved this like this, I only wanted to page the first nodes of my tree, and the children only are called after clicking the expand button, I know someppl need this and after some days thinking i solved like thisI have 2 stores, 1 is a treestore, other is a normal store.I call the treestore for painting the tree, the store for the paging component, so when the next event is called i call both the treestore and the store and page my element manually...As usual not the best practice, but it does work... and perfectly.

20 Jan 2016, 3:27 AM
Hello Super.rotus

I am facing the same issue you had, are you able to provide a bit more information about the dual-store configuration and how you paged the treegrid manually ?


20 Jan 2016, 9:20 AM
Figured it out and I think other people may want to do the same, so here is what I did (ExtJS 5.1):

1) Created a new view with a Tree Grid and a Paging Toolbar

2) Created a Tree Store and bound it to the Tree Grid

3) Created a normal Json Store and bound it to the Paging Toolbar

4) Added a REST proxy to the Json Store to fetch the data that will ultimately be displayed in the tree grid

5) Add an On Load event to the Json Store because we need to copy the data from the server into the Tree Store (note, server has to send back data that a Tree widget expects):

var treeGrid = Ext.ComponentQuery.query('#MyTreeGridItemId')[0];
var treeStore = treeGrid.getStore('TreeGridStore');
var proxy = treeStore.getProxy();

// next bits 2 lines are optional
var origParams = proxy.getExtraParams();
treeStore.getProxy().setExtraParams(origParams); // If using an Ajax/Rest proxy on the tree and you want to preserve the original parameters for use by the paging toolbar

treeStore.setRootNode(proxy.getReader().rawData); // Put the loaded data into the tree

6) Now paging toolbar will show the correct page count and it will update the tree when you do next/previous, etc