1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    21
    Vote Rating
    -3
    AlphaBravo can only hope to improve

      0  

    Default Dynamically adding panels

    Dynamically adding panels


    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.

    Code:
     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

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,011
    Vote Rating
    460
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

Thread Participants: 1