Extjs Dynamic Grid

Question

Intento crear una grilla dinámica utilizando Extjs. La cuadrícula se genera y se muestra cuando se activa un evento de clic, luego se envía una solicitud de ajax al servidor para buscar las columnas, los registros y la definición de registros, también conocidos como Store Fields. Cada nodo podría tener una estructura de grilla diferente y eso depende del nivel del nodo en el árbol.

La única forma en que se me ocurrió hasta ahora es

 function showGrid(response, request) {
var jsonData = Ext.util.JSON.decode(response.responseText);
var grid = Ext.getCmp(''contentGrid''+request.params.owner);
if(grid) {
grid.destroy();
}
var store = new Ext.data.ArrayStore({
id : ''arrayStore'',
fields : jsonData.recordFields,
autoDestroy : true
});
grid = new Ext.grid.GridPanel({
defaults: {sortable:true},
id:''contentGrid''+request.params.owner,
store: store,
columns: jsonData.columns,
//width:540,
//height:200,
loadMask: true
});
store.loadData(jsonData.records);
if(Ext.getCmp(''tab-''+request.params.owner)) {
Ext.getCmp(''tab-''+request.params.owner).show();
} else {
grid.render(''grid-div'');
Ext.getCmp(''card-tabs-panel'').add({
id:''tab-''+request.params.owner,
title: request.params.text,
iconCls:''silk-tab'',
html:Ext.getDom(''grid-div'').innerHTML,
closable:true
}).show();
}
}

La función anterior se invoca cuando se activa un evento de clic

 ''click'': function(node) {
Ext.Ajax.request({
url: ''showCtn'',
success: function(response, request) {
alert(''Success'');
showGrid(response,request);
},
failure: function(results, request) {
alert(''Error'');
},
params: Ext.urlDecode(node.attributes.options);
}

El problema que obtengo con este código es que se muestra una nueva grilla cada vez que se llama a la función showGrid. El usuario final ve las cuadrículas antiguas y la nueva. Para mitigar este problema, intenté destruir la cuadrícula y también eliminar el elemento de cuadrícula en cada solicitud, y eso parece resolver el problema solo de que los registros nunca se muestran esta vez.

 if(grid) {
grid.destroy(true);
} 

El comportamiento que estoy buscando es mostrar el resultado de una cuadrícula dentro de una pestaña y si esa pestaña existe, reemplazó la cuadrícula anterior. Cualquier ayuda es apreciada.

Gracias

Answer 1

Cuando intenta agregar su cuadrícula a la pestaña de esta manera:

 html:Ext.getDom(''grid-div'').innerHTML,

Ext no tiene conocimiento de que sea un componente de grilla válido. En cambio, simplemente está agregando etiquetas HTML que parecen una cuadrícula, pero el TabPanel no sabrá que es un componente de la cuadrícula. En su lugar, debe agregar la cuadrícula como pestaña (un GridPanel es un Panel y no necesita ser anidado en un panel principal). Puede hacerlo y también aplicar las configuraciones de pestañas necesarias de esta manera:

 Ext.getCmp(''card-tabs-panel'').add(
Ext.apply(grid, {
id:''tab-''+request.params.owner,
title: request.params.text,
iconCls:''silk-tab'',
closable:true
});
}).show();

Por cierto, crear y destruir cuadrículas constantemente no es una estrategia ideal si puedes evitarlo. Sería mejor simplemente ocultar y volver a mostrar las cuadrículas (y volver a cargar sus datos) según el tipo de cuadrícula que se necesita, si eso es posible (suponiendo que el conjunto de tipos de cuadrícula sea finito).

Answer 2

Una posible opción es usar el campo metaData en JsonStore que permite la reconfiguración dinámica de las columnas de la grilla según los nuevos conjuntos de datos.

De

Una de las publicaciones de blog más útiles sobre esto que he encontrado es esta: http://blog.nextlogic.net/2009/04/dynamic-columns-in-ext-js-grid.html y la información original está bien documentada en http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.JsonReader