Results 1 to 5 of 5

Thread: Noob Tree Panel and Loader question

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    185

    Default Noob Tree Panel and Loader question

    I am still learning extjs, and want to make sure I am barking up the right tree here (pun intended).

    I want to load my tree with N top level nodes and upon clicking the +, I want an ajax call to load that node up. My demo has this working except for the ajax part. I have successfully hooked into the beforeexpand event, and simulated the data from javascript.

    My understanding is that I should probably be using this TreeLoader object that the example uses to load the original data from a json file. But if this subsequent event had a different URL (for demo purposes I am putting the child data in a different json file) for each node to load, I need to tweak the URL before loading. But I am unsure how one is meant to interact with the loader at this point.

    So code-wise, I'm initializing as such:

    Code:
    Ext.onReady(function(){
        var tree = new Ext.tree.ColumnTree({
            width: 550,
            height: 300,
            rootVisible:false,
            autoScroll:true,
            enableDD:false,
         //   title: 'Search Asset & Items',
            renderTo: Ext.getBody(),
     
            columns:[{
                header:'ID',
                width:125,
                dataIndex:'identifier'
            },{
                header:'Description',
                width:250,
                dataIndex:'description'
            },{
                header:'Date',
                width:100,
                dataIndex:'date'
            },{
                header:'Aband No',
                width:75,
                dataIndex:'number'
            }],
            loader: new Ext.tree.TreeLoader({
                dataUrl:'CATSTreeGrid-data.json',
                uiProviders:{
                    'col': Ext.tree.ColumnNodeUI
                }
            }),
            root: new Ext.tree.AsyncTreeNode({
                text:'Tasks'
            })//end root
     
        }); //end new columnTree
     
        tree.addListener('beforeexpandnode', expandnode);
     
    });//end onready
    So let's say I want that expandnode method to point to 'child.json' (I see how parameters would be used in the real environment, but I am taking one step at a time here). I am doing this:

    Code:
    function expandnode(node, bDeep, bAnimate)
    {
        if(!node.hasChildNodes())
        {
         node.getOwnerTree().loader.dataUrl = 'child.json';
         //node.getOwnerTree().loader.load(node);
        }
    }
    That commented out load is what I am stuck on. I have tried a few variations on the theme, but I clearly don't get how i am supposed to use the loader to load the subset of the nodes I want to. Am I way off base here? Is there a better way to skin this cat?

  2. #2
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    185

    Default

    Oh yeah, in the load() the 2nd parm is supposed to be a callback function. But I didn't understand from the help what this callback is doing. Is it optional?

  3. #3
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Use:
    Code:
    loader: new Ext.tree.TreeLoader({
        dataUrl: 'CATSTreeGrid-data.json',
        uiProviders: {
            'col': Ext.tree.ColumnNodeUI
        },
        listeners: {
            beforeload: function(loader, node, callback){
                loader.dataUrl = ... based on node ...
            }
        }
    }),

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    185

    Default

    Thanks for the suggestion, but that doesn't seem to be working. The difficulty seems to be that the node passed to me lacks it's identifying properties for some reason. For example, I have a node defined in the initial json file. It is one of 8 that load.

    Code:
    {
       identifier: '08-ATF-026946',
       description: 'salad',
       date: '08/23/08',
       number: '99',
       uiProvider:'col',
       cls:'master-task',
       iconCls:'task-folder',
       checked:false,
       leaf: false,
       expandable: true
    }
    I set the loader up similar to what you suggested:

    Code:
            loader: new Ext.tree.TreeLoader({
                dataUrl: 'CATSTreeGrid-data.json',
                uiProviders: {
                    'col': Ext.tree.ColumnNodeUI
                },
                listeners: {
                    beforeload: function(loader, node, callback)
                    {
                  if(node.text != 'Tasks')
                  {
                   loader.dataUrl = node.identifier + '.json';
                   alert('set url to: ' + loader.dataUrl);
                  }
                    }
                }
            }),
    The alert reports that it is trying to load undefined.json. I've tried other alerts and it seems that .text does not exist either. .parentNode is the Tasks node, which is my root node.

    Otherwise the behavior is that the + becomes a -, but no nodes are created.

    I have a json file for each identifier key ready to load. They each look something like below. I presumed that the results of the secondary load should be only the children of the node being expanded.

    Code:
    [{
                   identifier: 1,
                   description: 'beef',
                   date: '',
                   number: '345',
                   uiProvider:'col',
                   leaf:true
                  }, {
                   identifier: 2,
                   description: 'bread',
                   date: '',
                   number: '456',
                   uiProvider:'col',
                   leaf:true
                  }, {
                   identifier: 3,
                   description: 'cheese',
                   date: '',
                   number: '5676',
                   uiProvider:'col',
                   leaf:true
                 }]

  5. #5
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    It's: node.attributes.identifier

    ps. If you node ids are unique you should use 'id' instead of 'identifier' (also used by TreePanel).

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •