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
    8,910
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."