add Panel not rendering

[dweeres]

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.

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);

[zhegwood]

You're losing scope... Try this:

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);

[dweeres]

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.

[dweeres]

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.