Does anybody know how to load data in ExtJS TreeGrid on demand?

Question

Hi!

I have found a good TreeGrid control in ExtJS library. But there is one thing, I have very big tree and I need the loading on demand.

Does anybody know how to load data in ExtJS TreeGrid on demand?

My code is here:

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

var tree = new Ext.ux.tree.TreeGrid({
    title: 'Encyclopedia',
    width: 400,
    height: 500,
    animate: true,
    autoScroll: true,
    renderTo: "EncyclopediaTree",
    containerScroll: false,
    border: false,
    enableDD: false,
    root : new Ext.tree.AsyncTreeNode({text: 'Root'}),
    loader: new Ext.tree.TreeLoader({ dataUrl: '/AdminEx/GetEncyclopediaTree' }),        

    columns: [{
        header: 'Item',
        dataIndex: 'item',
        width: 230
    }, {
        header: 'Type',
        width: 150,
        dataIndex: 'type'
    }]        
});

});

Answer 1

What do you mean by on demand loading? I can see you are using asynchronous nodes, so that will be automatically on demand loaded whenever a node is expanded.

Answer 2

I see that you are you are using the Ext.tree.AsynctreeNode and Ext.tree.TreeLoader but the TreeGrid also has ux classes for TreeGridLoader and TreeGridNodeUI, etc.

Look at this example with Firebug's Net tab and you will see all the related files to use the TreeGrid http://dev.sencha.com/deploy/dev/examples/treegrid/treegrid.html

Answer 3

The example from Sencha work fine and loads data on demand as you want. The question is whether or not it needs to load new data.
So in that example, it doesn't need to, cause no matter what parameters you pass to the dataUrl it will always return the full tree loaded.
But if there is a node in the tree without children and you don't explicitly say it's a leaf, when you expand that node it will make a new call to the dataUrl with the node id parameter.
You are responsible to return the right data from your backend, both in the initial load of all the parent nodes and everytime a new node is expanded.
You can check that it's working simply removing all children from any node, you will see that when that node is expanded it will execute an Ajax request for the new nodes (I think default method is POST).
A simple example setting request method and baseParams to be passed in the request along with the node id:

var tree = new Ext.ux.tree.TreeGrid({
    renderTo: "outputDiv",

    loader: new Ext.ux.tree.TreeGridLoader({
        dataUrl: "general-data",
        requestMethod: "GET",
        baseParams: {
            fromDate: "2010-01-01",
            toDate: "2010-01-01",
            dateField: "systemDate"
        }
    }),

    columns:[{
        header: "Customer",
        dataIndex: "customer"
    },{
        header: "Order",
        dataIndex: "orderNumber"
    },{
        header: "Order Line",
        dataIndex: "orderLine"
    },{
        header: "Item",
        dataIndex: "itemNumber"
    }]
});

You can also add node attributes as params like this:

tree.getLoader.on("beforeload", function(treeLoader, node) {
    this.baseParams.customer = node.attributes.customer;
}, this);