Dynamically adding panels

[AlphaBravo]

Hi there,

I'm trying to add nested child panels to a single panel. These panels are being created with information from a store. I have to wait for a store to load before adding the panels to the main parent panel.

The store loads, the main panel renders, however I get an error when trying to add a child panel. I've cycled through the various panel events without any luck.

 Ext.define('TonTrac.view.Sidebar', {    extend: 'Ext.panel.Panel',
    alias: 'widget.sidebar',


	//Region setting for border layout
	region: 'west',
	
	//Layout settings
    layout: {
        hideCollapseTool: true,
        type: 'accordion'
    },
	
	//Adding a frame so that its pretty.
	frame: true,
	
	//Size settings
	maxWidth: 450,
    minWidth: 150,
    width: 200,
	
	//Collapse settings
	collapsed: true,
    collapsible: 'true',
    hideCollapseTool: true,
    iconCls: 'settings',
	


	/**
	 * Task: Loading the store, populating panel with child items
	 * Problem: Sync/Event Issues
	 *
	 * Can't while-loop in initComponent to wait for load
	 * Can't paint after storeLoad, afterrender, etc
	 * 
	 *
	 */


    initComponent: function() {
        var me = this;
		me.sidebar = new Array();
		me.callParent();
		
		me.store = Ext.create("Ext.data.Store", {
			model: 'TonTrac.model.ModuleFeature',
			autoLoad: true,
			listeners: {
				load: {
					fn: me.onStoreLoad,
					scope: me
				}
			}
		});


		me.paintSidebar();
		me.on('activate', me.paintSidebar, this, { single: true });
    },
	
	onStoreLoad: function(store, records, successful, operation, options) {
        var me = this;
		
		console.log("Store loaded");


        store.each(function(record) {
            var moduleName = record.raw.ModuleName,
                moduleDescription = record.raw.ModuleDescription,
                featureName = record.raw.FeatureName,
                featureDescription = record.raw.FeatureDescription,
                featureXtype = record.raw.FeatureXtype;


            if(me.hasModule(me,moduleName)) {
                var feature = new Object();
                feature.name = featureName;
                feature.description = featureDescription;
                feature.xtype = featureXtype;
                me.sidebar[me.getModuleIndex(me,moduleName)].feature.push(feature);
            } else {
                var module = new Object();
                module.name = moduleName;
                module.description = moduleDescription;
                module.feature = new Array();


                var feature = new Object();
                feature.name = featureName;
                feature.description = featureDescription;
                feature.xtype = featureXtype;


                module.feature.push(feature);     
                me.sidebar.push(module);           
            }
        });
    },
	
	paintSidebar: function() {
		var me = this;
		console.log("painting sidebar: " + me.sidebar);
		
		for (var i = 0; i < me.sidebar.length; i++) {


			var panel = Ext.create('Ext.panel.Panel', {
				title: me.sidebar[i].name,
				initComponent: function() {
					var me = this;
					me.callParent();
				}
			});


			for (j = 0; j < me.sidebar[i].feature.length; j++) {     
				panel.add({
					xtype: 'button',
					text: me.sidebar[i].feature[j].name
				});
			}
			
			me.add(panel);
		}
	},


    getModuleIndex: function(me, module) {
        for (var i = 0; i < me.sidebar.length; i++) {
            if (me.sidebar[i].name === module) {
                return i;
            }
        }
    },


    hasModule: function(me, module) {
        for (var i = 0; i < me.sidebar.length; i++) {
            if (me.sidebar[i].name === module) {
                return true;
            }
        }
        return false;
    }
});

If anyone has any idea on how to do this or on which event to add new child items on, please shout!

Thanks in advance

[scottmartin]

In taking a quick look, it is most likely that your parent panel may not be done rendering ...

You should move any listeners to your component create and not in your define when it is still under contruction.

Ext.define('myPanel', { .. });
Ext.create('myPanel', {
// build sub panels here.
});

Regards,
Scott.