Search code examples
javascriptajaxextjsextjs4

How to expand a tree panel when page is loaded - EXTJS 4


var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        //useArrows: true,
        frame: true,
        title: 'Vehicle List',
        region:'west',
        width: 200,
        root: {
        expanded: true
        },
        checked : false,
        height: 250,
        dockedItems: [{
            xtype: 'toolbar',
            items: {
                text: 'Get checked nodes',
                handler: function(){
                    var records = tree.getView().getChecked(),
                        names = [];

                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('MainID'));
                    });

                    Ext.MessageBox.show({
                        title: 'Selected Nodes',
                        msg: names.join('<br />'),
                        icon: Ext.MessageBox.INFO
                    });
                }
            }
        }]
    });

How can I get the tree to expand? I have tried

root: {
        expanded: true
        }

But it still doesn't work.


Solution

  • Add this to your model:

    { name: 'expanded', type: 'boolean', defaultValue: true, persist: false },
    

    Or alternatively set expanded to true for each node you return from the server.