View Full Version : Loading extjs tree nodes data on demand

20 Mar 2012, 6:40 AM

I am a newbee to Ext js.I am using extjs 4.0 version. Below is my extjs-treegrid.js.

I would like to know, how could I achieve on demand load of data whenever the child nodes are clicked.
Basically, I want to load only configurable records from json file to my tree grid and on click of the any of the childnodes(or any node) I want to load all the records from the same/different json file. I mean asyncronous load.

An extjs java script example will be much helpful/any examples we have at sencha.
Kindly help.

Ext.onReady(function() {
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: fdata // this variable holds all the fields
var store = Ext.create('Ext.data.TreeStore', {
model: 'MyModel',
proxy: {
type: 'ajax',
url: 'myJson.json'
} ,
folderSort: true
var grid = Ext.create('Ext.tree.Panel', {
store: store,
height: 400,
width: 970,
renderTo: 'divarea',
expanded: true,
useArrows: false,
rootVisible: false,
loadMask: true,
columns: coldata//this variable holds all the columns correctly mapped with dataIndex


20 Mar 2012, 9:37 AM
If a node is not a leaf but has no children specified, then when you expand the node it should fire off a request to load the children.

20 Mar 2012, 11:51 PM
Thanks for the reply. Could you plz guide me if we have any such examples on sencha docs or with code snipppet to achieve it.

Thanks in advance.

21 Mar 2012, 6:25 AM
Please see the post below.. I want to achieve exactly the same in extjs 4.


I tried the below code snippet in my script.

root : new Ext.tree.AsyncTreeNode({text: 'Root'}),
loader: new Ext.tree.TreeLoader({
dataUrl: 'myNewJson.json' }),

It is not working, when I dig into the sencha extjs 4 docs. I do not find AsyncTreeNode or TreeLoader.

Also, on the above thread they shared below sencha link (which is throwing 404 Not found)


21 Mar 2012, 7:50 AM
Have you read this thread?