1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Canada
    Posts
    11
    Vote Rating
    0
    dweeres is on a distinguished road

      0  

    Default add Panel not rendering

    add Panel not rendering


    The following is code that I am having trouble with:

    the problem is that the "TEST1" and "TEST2" panels are showing up, but the "TEST3" panel does not. Using firefox, I notice that the panel is never rendered, but the firefix does indicate that the panel is being added.

    Any suggestions would be greatly appreciated.

    Code:
    Ext.ns('Ext.d');
    Ext.d.MaterialTypeCharacteristicsPanel = Ext.extend(Ext.Panel,{
    	title:"Material Type Characteristics",													 
    	materialTypeId:-1,
    	supplierCompanyId:-1,
    	constructor:function(config) {
    		// constructor pre-processing - configure listeners here
    		config = config || {};
    		config.listeners = config.listeners || {};
    		Ext.applyIf(config.listeners, {
    			add:function(t,p) {console.log(p)},
    			 render:{scope:this, fn:function() {
    				this.store_materialTypeChars.load({
    					params:{material_type_id:this.materialTypeId,supplier_company_id:this.supplierCompanyId},
    					scope:this,
    					callback:function(records,options,success) {
    						var p=new Ext.Panel(
    							{
    							title:"TEST",
    							html:"TEST3",
    								listeners:{
    									render:function(){console.log("rendered")}	
    								}
    							}
    						)
    						this.add(p)
    						this.doLayout()
    					}
    	
    				}) 
    				this.add(new Ext.Panel({title:"TEST",html:"TEST2"}))
    				}
    			}
    	   });
    	   Ext.d.MaterialTypeCharacteristicsPanel.superclass.constructor.apply(this, arguments);
    	},
    
    	initComponent:function() {
    
    		var model_materialTypeChars=[
    			{name: 'type_id',type:'string'},
    			{name: 'char_id',type:'string'},
    			{name: 'char',type:'string'}
    		]
    		
    		this.store_materialTypeChars= new Ext.data.Store({
    			url: '/material/cfc/cfc_materials.cfc?method=get_material_type_chars_json',
    			reader: new Ext.data.CFJsonReader( model_materialTypeChars,null),
    			listeners : {
    				loadexception:function (s,o,response,e) {
    					Ext.get("err").update(response.responseText)
    				}
    			}
    		})
    		
    		var config = { 
    			title: this.title,
        		layout:'table',	  
    			autoWidth:true,
    			style:"width:100%",
    			defaults: {style:"padding:2px"},
    			layoutConfig: {columns: 3},
    			items:[{type:"xpanel",title:"TEST",html:"TEST1"}]
    			
    		};
    
    		Ext.apply(this, config);
            Ext.d.MaterialTypeCharacteristicsPanel.superclass.initComponent.apply(this, arguments);								
    	}
    													 
    })
    Ext.reg('materialtypecharpanel', Ext.d.MaterialTypeCharacteristicsPanel);

  2. #2
    Ext User zhegwood's Avatar
    Join Date
    Dec 2007
    Location
    Boulder, CO Suburbia (Lafayette)
    Posts
    388
    Vote Rating
    1
    zhegwood is on a distinguished road

      0  

    Default


    You're losing scope... Try this:

    Code:
    this.store_materialTypeChars.load({
    	params:{material_type_id:this.materialTypeId,supplier_company_id:this.supplierCompanyId},
    	scope:this,
    	callback:function(records,options,success) {
    		var p=new Ext.Panel({
    			title:"TEST",
    			html:"TEST3",
    			listeners:{
    				render:function(){console.log("rendered")}	
    			}
    		});
    		this.add(p);
    		this.doLayout();
    	}
    }, this);

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Canada
    Posts
    11
    Vote Rating
    0
    dweeres is on a distinguished road

      0  

    Default


    thanks zhegwood, I appreciate your response but unfortunately that did not do it.

    The problem is that it actually is being added to the parent panel, but it does not render it.

    I can tell that it is being added via the code: add:function(t,p) {console.log(p)},

    And not being rendered via your code:
    listeners:{render:function(){console.log("rendered")}}
    and that it does not show

    and other suggestions would be greatly appreciated.

  4. #4
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Canada
    Posts
    11
    Vote Rating
    0
    dweeres is on a distinguished road

      0  

    Default


    Ok I figured it out, sort of.

    The doLayout() is not calling the setLayout() properly, so basically replacing the doLayout() with

    this.getLayout().renderAll(this,this.getLayoutTarget())

    fixed the problem.

    Not sure why the doLayout does not work properly with the tablelayout after the inital render.

Thread Participants: 1