Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Grid Store load - Cannot call method 'insertBefore' of null

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default Grid Store load - Cannot call method 'insertBefore' of null

    Hello guys, Im a Mexico Developer, and sorry for my english.

    Im working with this framework since one year and this is the first time that I have a trouble with a datagrid, when I try to load the data, the console shows an error:

    Uncaught TypeError: Cannot call method 'insertBefore' of null

    The data is loaded in the datagrid, but they shows like the control be disabled,,I have to reload to view correctly the data, but the error not appear again.

    Load one:
    cargaUno.png

    Load two:
    cargaDos.png


    this my code view:
    Code:
    {                                                            
    xtype: 'gridpanel',                                                            
    autoRender: true,                                                           
     autoShow: true,                                                            
    id: 'gridAH',                                                            
    autoDestroy: false,                                                            
    collapsible: false,                                                            
    title: 'Actividades',                                                            
    emptyText: 'Sin actividades para el dia',                                                            
    enableColumnHide: false,                                                            
    enableColumnMove: false,                                                            
    store: 'storeActividades',                                                           
     columns: [                                                                
    {                                                                   
     xtype: 'gridcolumn',                                                                    
    dataIndex: 'hora',                                                                   
     text: 'Hora',                                                                    
    flex: 0.2                                                               
     },                                                                
    {                                                                    
    xtype: 'gridcolumn',                                                                   
    dataIndex: 'actividad',                                                                    
    text: 'Actividad',                                                                    
    flex: 0.8                                                                
    },                                                               
     {                                                                    
    xtype: 'actioncolumn',                                                                    
    handler: function(view, rowIndex, colIndex, item, e, record, row) {                                                                        manejadorAperturaActividades(record);                                                                    
    },                                                                    
    draggable: false,                                                                    
    resizable: false,                                                                    
    align: 'center',                                                                    
    altText: 'Mostrar detalles',                                                                    
    iconCls: 'icon_mensaje_o'                                                                
    }                                                           
     ],                                                            
    viewConfig: {                                                               
     loadingText: 'Cargando...'                                                            
    }                                                        
    }
    this is the store config and model
    Code:
    Ext.define('GCAdmin.model.modelActividades', {    
    extend: 'Ext.data.Model',
        requires: [        'Ext.data.Field'    ],
        fields: [        
    {            name: 'id',            type: 'int'        },        
    {            name: 'hora',            type: 'string'        },       
     {            name: 'actividad',            type: 'string'        },      
      {            name: 'contacto',            type: 'string'        },        
    {            name: 'tipo',            type: 'string'        },        
    {            name: 'prioridad',            type: 'int'        },        
    {            name: 'detalles',            type: 'string'        }    
    ]});
    
    Ext.define('GCAdmin.store.storeActividades', {   
     extend: 'Ext.data.Store',
        requires: [        'GCAdmin.model.modelActividades',        'Ext.data.proxy.Ajax',        'Ext.data.reader.Json'    ],
    constructor: function(cfg) {        
    var me = this;        cfg = cfg || {};        
    me.callParent([Ext.apply({           
     model: 'GCAdmin.model.modelActividades',            
    storeId: 'storeActividades',            
    proxy: {                
    type: 'ajax',              
      url: './php/class.asesorComercial.php',               
     reader: {                   
     type: 'json',                   
     root: 'root'                
    }           
     }       
     }, cfg)]);  
      }});
    and this is the controller

    Code:
    function manejadorCalendario(component,fecha){   
     var myFecha = Ext.util.Format.date(fecha,"Y-m-d");       
     var rejillaAH = Ext.getCmp("gridAH");        
    var storeRAH = rejillaAH.getStore();       
     var params = {instruccion:'cargarActividadesHorario',fecha:myFecha,id:infosession.id};
            
    storeRAH.load({params:params});}
    I hope that can help me, thaks

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    It would difficult to tell. Please provide a working example using our Fiddle. Here is a starting point:
    https://fiddle.sencha.com/#fiddle/1ru

    I admit I do not understand the use of:

    autoRender: true,
    autoShow: true,

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default

    Quote Originally Posted by scottmartin View Post
    I admit I do not understand the use of:

    autoRender: true,
    autoShow: true,
    I guess , that its a trouble with a DOM, and I have expecting resolve the trouble for this mean , because Firefox firebug shows this message:

    TypeError: el.parentNode is null


    el.parentNode.insertBefore(this.dom, el);


    Additional to this , I discover that the trouble only is generated ,after of reload the entire page, when the page is load for first time, run fine.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    after of reload the entire page
    if you remove your hard 'id', does this help? You should use itemId instead.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default

    Quote Originally Posted by scottmartin View Post
    if you remove your hard 'id', does this help? You should use itemId instead.
    I have replaced the id by itemId and the method to recover the component and the trouble continues


    Fastly I explain the project.


    When the app is loading , I look for a session started, if not started, I show a form to login , else, show a view that contains the datagrid, this view is a panel that is on a panel with layout 'card', I do of this mean, because select dynamically the card to show, depending of the data of session.


    when I login into the app works fine, but when I reload the app and reload the data grid the error appears


    the login success and the handler of session calls the same method with the same data to show the view

    Code:
    function handlerSesion(info){
        mV = Ext.getCmp('myViewport');
        
        cP = Ext.getCmp('contenedorPrincipal');
        
        mV.update("");
        
        cP.setVisible(true);
    
    
        var active = 0;
        
        var vista = parseInt(info.vista,10);
        
        var layout = cP.getLayout();
        
        layout.setActiveItem(vista);
        
        active = cP.items.indexOf(layout.getActiveItem());
        
        switch(active)
        {
            case 0:
                interfazAsesor(info);
                break;
            case 1:
                //other interface
                break;
        } 
    }

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    The continued use of Ext.getCmp() leads me to believe you have a few more id's left

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default

    Quote Originally Posted by scottmartin View Post
    The continued use of Ext.getCmp() leads me to believe you have a few more id's left
    Yes this is a bad practice?


    I will replace all no problema.


    It could be solve the trouble if I replace all id for itemId, this is a surprise to me, is the first time that I have a problem like this, because of the property id

  8. #8
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Yes, I would use itemId instead. If the id remains in the DOM, then it can cause problem if a component is created again with the same id

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default

    ok, I understandI will replace all id component, and I tell you what happened

  10. #10
    Sencha User
    Join Date
    Jan 2012
    Posts
    8

    Default

    Im completed to replace all ID to itemId and change the geter of the components by Ext.ComponentQuery.query('[itemId=string]'), and I have the same trouble.

Page 1 of 2 12 LastLast

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
  •