Dynamic GridPanel don't show

[ccasasola]

I've a gridpanel that is rendered after to realize a search. The problem is that grid panel doesn't shows...
This is code

Ext.namespace('project.module');


project.module.mntReglaCanal = function(config){
		return new Ext[config.panel](Ext.apply({
			title		: 'Mantenimiento de Reglas',
	        layout      : 'border',
	        closeAction : 'hide',
	        initComponent : function() {
	        
        	var form = new Ext.FormPanel({
            	region     : 'north',
                labelWidth : 80,
                height	   : 200,
                autoHeight : true,
                baseCls    : 'x-plain',
                bodyStyle  : 'padding-top:5px;',
	            items: [
	                    //items...
      			],
      	        keys: { key: 13, handler: this.buscar, scope: this }
	        });
        	this.cm = new Ext.grid.ColumnModel({
				columns: [],
				defaults: {
			        sortable: true,
			        menuDisabled: true
			    }
			});
        	
        	this.st = new Ext.data.ArrayStore({
		            fields: [],
		            data: []
		    });
        	
            this.gridReglas = new Ext.grid.GridPanel({
				region : 'center',
				height: 600,
				loadMask : true,
				store : this.st,
				colModel : this.cm,
				plugins  : [],
				viewConfig: {
           		   forceFit: true
           	    },
                tbar : [
                     	  '->',  
                        {text    : 'Buscar',  handler : this.buscar,  scope : this, iconCls : 'tb-search'},
                        
				bbar : [new Ext.PagingToolbar({
							style       : {height: '20px'},
							pageSize 	: ConfigExt.pageSize,
							store 		: this.st,
							displayInfo : true,
							displayMsg 	: 'Registros {0} - {1} de {2}',
							emptyMsg 	: 'No hay registros'
						}),
						'->',  
                     { text   : 'Nuevo', handler : this.new, 		scope : this, iconCls : 'tb-new'} 
                     
				]
			});
            
            this.items  = [form, this.gridReglas];
            Ext[config.panel].prototype.initComponent.call(this);            
            this.form = form.form;
            
        },


        
        buscar : function() {
			//Get value from a combobox
        	var p = {
        			idreglacanal: this.cmbreglacanal.getValue()
        	};
        	
        	callServer(rootCOMISION + 'comision.do?method=lstReglaCanalDet', p, function(v, j){
				if (j.origen == 'success') {
					v = Ext.decode(v);
					var columnas = [], fields = [];
					
					for(var i = 0; i < v.length; i++){
						//[3] hace referencia al atributo idcampo de la clase MntReglaCanalDet 
						columnas.push({header: v[i][3].toUpperCase(), dataIndex: v[i][3].toLowerCase(), align: 'center', width: 40});
						fields.push({name: v[i][3].toLowerCase(), type: 'string'});
					}
					
					this.cm.columns = COLMODEL(columnas, {});


					callServer(rootCOMISION + 'comision.do?method=lstReglaCanalDetValor', p, function(v, j){
						if (j.origen == 'success') {
							v = Ext.decode(v);
							
							//this.st.fields = fields;
							//this.st.loadData(v);
							this.st = new Ext.data.ArrayStore({
					            fields: fields,
					            data: v,
					            idIndex: 0 
							});
							this.gridReglas.reconfigure(this.st, this.cm);
						}
			    	}, this, function(msg, j){
					      Ext.Msg.error(msg);
			    	});
					
				}
	    	}, this, function(msg, j){
			      Ext.Msg.error(msg);
	    	});
	    },
     
        show : function(p){
        	
        	Ext[config.panel].prototype.show.call(this);
        	if (config.panel == 'Dialog' || config.panel == 'Window'){
            	this.buscar();
        	}
        },
	  
        onDestroy : function() {
            Ext[config.panel].prototype.onDestroy.call(this);


        }
	}, config));
};

[Kachopsticks]

I have never added a grid panel dynamically. To accomplish what you are trying to do I would just add the grid panel at the same time you create your form, so that the grid panel is added statically, not dynamically. When you define your grid panel just set it to hidden. Then when you are ready to show it just do this.gridReglas.show(). Adding it in the initComponent function is not really that dynamic anyways, since it is still getting added before the parent renders. Other examples of adding panels dynamically use the this.add function which is what I use to add fields and other components dynamically.Anyways, your issue might be you are missing a closing bracket on your tbar config inside your grid definition.#CODE#tbar : [ '->', // - also what are these arrows? {text : 'Buscar', handler : this.buscar, scope : this, iconCls : 'tb-search'}],//added this closing bracket#CODE# your handler for your paging tool bar is this.new, you may want to change this and create an actual handler, not sure if that is your issue though...Good luck!

[ccasasola]

I only changed this:

this.cm.columns = COLMODEL(columnas, {});

By

this.cm = COLMODEL(columnas, {});

COLMODEL is a function that build a ColModel object