PDA

View Full Version : Issue creating 2 EditorGridPanels with the same colModel definition



jaadolio
17 Jan 2011, 8:59 AM
Hi,
I am currently creating a project that involves typing several numbers in a type of grid, so that's why I'm using EditorGridPanel.

The page has 2 Grids that where created after I used a Ext.Extend to generate a common object that helped me define these components very easy.

I have also used an accordion component created in jQuery to be able to display different sections according to the user's needs

However I have a little inconvenience. Both of these grids uses the same ColumnModel definition according to the JsonStore. When I clicked a column in one Grid, the column displays the editor's textbox, but when I go to the other grid and clicked the same column, the editor's textbox is not displayed.

I checked on Firebug to confirm if there was any errors, but there are no information about it.

If anyone can provide me any suggestions or recommendations, it will be appreciated.

Thanks.

fmntf
17 Jan 2011, 12:27 PM
You should post the base class.

I guess you are hardcoding some object in the prototype. Doing this, in JavaScript, will share the same object (the columnmodel, in this case) over all the instances of that class.


b = Ext.Extend(a, {
c : {
// this object will be shared between every instance of b
}
});

jaadolio
17 Jan 2011, 12:46 PM
This is the base class:



Ext.ns("Matriz.gAcademicos");

Matriz.gAcademicos = Ext.extend(Ext.grid.EditorGridPanel, {

initComponent: function() {

//Definimos el Almacén de Datos para Grados Académicos
this.alm_gAcad = new Ext.data.ArrayStore({fields: campos_gAcad});

//Definimos el complemento de Agrupación de los Encabezados de la Matriz de Grados Académicos
this.agrup_encab = new Ext.ux.grid.ColumnHeaderGroup({rows: [encab_PMAcad]});

//Definimos las Columnas Principales de la Matriz
this.col_gAcademicos = new Ext.grid.ColumnModel(encab_SMAcad);

//Definimos las demás propiedades de la Matriz
var config = {
frame: true
,store: this.alm_gAcad
,sm: new Ext.grid.CheckboxSelectionModel()
,plugins: this.agrup_encab
,colModel: this.col_gAcademicos
,clicksToEdit: 1
,width: 858
,height: 250
}; // Fin de la Configuración

//Aplicamos la configuración
Ext.apply(this, Ext.apply(this.initialConfig, config));

//Llamamos al evento Padre
Matriz.gAcademicos.superclass.initComponent.apply(this, arguments);
} // Fin función initComponent

}); //Fin de Matriz.gAcademicos = Ext.extend(Ext.grid.EditorGridPanel,

//Registramos el componente personalizado anterior como un componente Ext
Ext.reg('matrizacad', Matriz.gAcademicos);

The variable "campos_gAcad" contains the definition of all the fields required to be included in the store. The variable "encab_PMAcad" is used as the principal header and "encab_SMAcad" is the ColModel for the grid (this last feature was created according to the ColumnHeaderGroup sample included on the ExtJS examples folder).

These variables are initialized dynamically from a MySQL Database using the following PHP code:



//Procedemos a obtener la información de los campos principales para el Grid
//de Grados Académicos, junto con la definición de los encabezados
$campos = "{name: 'id_carrera', type: 'int'},
{name: 'carrera'},
{name: 'acum_AS', type: 'int'},
{name: 'acum_F', type: 'int'},";

$encab_princ = "{header: 'Carrera', colspan: 1, sortable: true, align: 'center'},
{header: 'Acumulado.<br />Estud.', colspan: 2, sortable: true, align: 'center'},";

$encab_secund = "{header: 'Nombre', width: 210, sortable: true, dataIndex: 'carrera', align: 'center'},
{header: 'Acum.<br />Ambos<br />Sexos', width: 50, sortable: true, align: 'center', dataIndex: 'acum_AS',
css:'background-color: #76923C; border: thin 1px #76923C; font-weight:bolder;'},

{header: 'Acum.<br />Fem.', width: 50, sortable: true, align: 'center', dataIndex: 'acum_F',
css:'background-color: #F2DBDB; border: thin 1px #F2DBDB; font-weight:bolder;'},";

//Recorremos el arreglo para obtener los campos
foreach($grados_academicos as $grado){
$campos .= "{name: '".$grado['c_grado']."_AS', type: 'int'},
{name: '".$grado['c_grado']."_F', type: 'int'},";

$encab_princ .= "{header: '".$grado['abr_grado']."', colspan: 2, sortable: true, align: 'center'},";

$encab_secund .= "{header:'Ambos<br />Sexos', width: 50, sortable: true,
align: 'center', dataIndex: '".$grado['c_grado']."_AS',
editor: new Ext.form.NumberField({allowBlank:false, allowNegative:false, maxValue: 10000})},

{header:'Fem.', width: 50, sortable: true,
align: 'center', dataIndex: '".$grado['c_grado']."_F',
editor: new Ext.form.NumberField({allowBlank:false, allowNegative:false, maxValue: 10000})},";

}//Fin del foreach($grados_academicos as $grado)
$campos = substr($campos, 0, strlen($campos)-1);
$encab_princ = substr($encab_princ, 0, strlen($encab_princ)-1);
$encab_secund = substr($encab_secund, 0, strlen($encab_secund)-1);

//Asignamos la información de los campos a las variables Javascript
echo "campos_gAcad = [".$campos."];";
echo "encab_PMAcad = [".$encab_princ."];";
echo "encab_SMAcad = [".$encab_secund."];";
The "$grados_academicos" php array was previously filled with the data by making SELECTs to specific tables in the database

Thanks