PDA

View Full Version : Grid Store load - Cannot call method 'insertBefore' of null



javallem
27 Nov 2013, 9:02 AM
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:
47029

Load two:
47030


this my code view:


{
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


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



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

scottmartin
27 Nov 2013, 11:02 AM
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,

javallem
27 Nov 2013, 11:36 AM
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.

scottmartin
27 Nov 2013, 11:39 AM
after of reload the entire page

if you remove your hard 'id', does this help? You should use itemId instead.

javallem
27 Nov 2013, 12:43 PM
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


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;
}
}

scottmartin
27 Nov 2013, 12:46 PM
The continued use of Ext.getCmp() leads me to believe you have a few more id's left

javallem
27 Nov 2013, 12:55 PM
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

scottmartin
27 Nov 2013, 1:03 PM
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

javallem
27 Nov 2013, 2:00 PM
ok, I understandI will replace all id component, and I tell you what happened

javallem
28 Nov 2013, 12:11 PM
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.

javallem
29 Nov 2013, 8:54 AM
I dont understand how is working the fiddle, but I complete to recreate the structure of my project at this url https://fiddle.sencha.com/#fiddle/1sj

I use a Sencha Architect 3 , and the code is dynamically generated, before I use the Sencha Architect, I wrote a lot of code, It curiosly that I not had troubles like now.

javallem
5 Dec 2013, 12:47 PM
Any sugestion for this thread ?

scottmartin
5 Dec 2013, 1:02 PM
The url for your fiddle is just a blank .. a new fiddle with no user code. Did it not save?

If you do not want to re-create the fiddle, please just post the code for a working test case ( not just snippets )

We will take a look.

Scott