Results 1 to 3 of 3

Thread: Issue creating 2 EditorGridPanels with the same colModel definition

  1. #1

    Post Issue creating 2 EditorGridPanels with the same colModel definition

    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.

  2. #2
    Sencha User fmntf's Avatar
    Join Date
    Jan 2010
    Location
    Siena, Italy
    Posts
    35

    Default

    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.

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

  3. #3

    Default

    This is the base class:

    Code:
    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:

    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($campos0strlen($campos)-1);
                
    $encab_princ substr($encab_princ0strlen($encab_princ)-1);
                
    $encab_secund substr($encab_secund0strlen($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

Similar Threads

  1. function to set tabbing on a page with EditorGridPanels
    By micah.d.lamb in forum Community Discussion
    Replies: 1
    Last Post: 23 Dec 2010, 1:54 AM
  2. Replies: 1
    Last Post: 5 Aug 2010, 7:05 AM
  3. Creating store with existing record definition
    By vvt-cjay in forum Ext 3.x: Help & Discussion
    Replies: 11
    Last Post: 28 Jul 2010, 1:47 AM
  4. Multiple EditorGridPanels on a page; Data returns, but not displaying
    By qhas in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 27 Jun 2008, 5:35 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •