PDA

View Full Version : Dynamic GridPanel don't show



ccasasola
29 Sep 2014, 7:53 AM
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
30 Sep 2014, 5:38 AM
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
1 Oct 2014, 4:51 PM
I only changed this:



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

By



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

COLMODEL is a function that build a ColModel object