Dynamic tree panels

Hi All;

Sorry for the long code snippet, but I use the following to build a series of tree panels used to provide navigation within our application. This works fine in 4.0.7, but fails on the menuPanel.add with:

el is undefined: line 568 of context.js

Code:

---

    /*
    * Load menu
    */
    loadMenu: function() {
        var me = this,
            menuStore = Ext.getStore('Menu'),
            menuPanel = this.getPanWest(),
            treePanel = [],
            treeLevel,
            treeStore,
            treeNode,
            rootNode = [];
        if (menuPanel.collapsed) {
            menuPanel.toggleCollapse();
        }
        menuStore.load({
            scope  : this,
            callback: function(records, operation, success) {
                if (success === true ) {
                    // Create array of tree panels from menu store
                    Ext.Array.forEach(records, function(record, index) {
                        treeLevel = record.get('MENU_TASK_TREE') - 1;
                        if (treeLevel >= 0) {
                            if (treeLevel === 0) {
                                treeStore = Ext.create('Ext.data.TreeStore', {
                                    root: {
                                        text: 'Root',
                                        expanded: true
                                    }
                                });
                                rootNode[0] = treeStore.getRootNode();
                                treePanel.push({
                                    xtype: 'treepanel',
                                    title: record.get('MENU_TASK'),
                                    itemId: 'menu' + index.toString(),
                                    store: treeStore,
                                    rootVisible: false,
                                    useArrows: true                                   
                                });
                            }  else {
                                if (record.get('MENU_PROCEDURENAME') === '') {
                                    treeNode = {
                                        text: record.get('MENU_TASK'),
                                        expanded: true,
                                        leaf: false
                                    };
                                } else {
                                    treeNode = {
                                        menuProcedure: record.get('MENU_PROCEDURENAME'),
                                        text: record.get('MENU_TASK'),
                                        expanded: false,
                                        leaf: true
                                    };
                                }
                                rootNode[treeLevel] = rootNode[treeLevel-1].appendChild(treeNode);
                            }
                        }
                    });
                    // add tree panels to west region
                    menuPanel.add(treePanel);
                    // add listeners
                    Ext.Array.forEach(treePanel, function(record, index) {
                        menuPanel.down('treepanel[title=' + record.title + ']').on({
                            scope: me,
                            itemclick: me.onClick,
                            itemdblclick: me.onClick
                        });
                    });
                }
            }
        });
    },

---

Any ideas?

Thanks,
Gordon

In the attached zip file is a small app showing the problem. This does work with 4.0.7.

Any help would be appreciated.

Thanks,
Gordon

The quick fix is to do the add call before you toggle the panel.

I thought I had tried that, my bad.

Thanks for the help.

Regards,
Gordon