PDA

View Full Version : ExtJS 4.1 headers tab crashing



bourbourg
9 Jul 2012, 8:05 AM
Hello eveybody,

I have a problem when many panels/gridpanels are open in a tabpanel.
Indeed, when I close one of them the header of each panel is crashing ( is it the dom crashing ? )
and I must to refresh the page for continuing to using the application....
This happens when there are several instance of one grid and when i click on the close button of a tab...

Firstly, I thinked it was the id of each component used in the tab container, but it isn't...
Anyone has an idea ? :)

Before the click on close button :

36964

After the click of the close button :

36965

In firebug I have this error :

"item.el.dom is undefined"


Can it coming from my column model construction? (I build the column model with a loop in order to allow user to parameter the list of the columns)

Excuse me for my bad english... :D

Thanks you for your help :)

Izhaki
9 Jul 2012, 8:41 AM
Most likely you are not declaring your panels correctly. Could you please provide some code showing the way you create/define a panel that exist within the tab panel?

scottmartin
9 Jul 2012, 9:32 AM
Please do not assign an id .. see if this helps. Sounds like you are closing all when you close one .... same id?

It is bad practice to use id anyway.

Scott.

bourbourg
10 Jul 2012, 12:13 AM
It is strange to not use an id.
Indeed, how can I do if i want to test if i must to setActive a tab or to open it whitout using id ?
I will post some extracts of the code soon.

I don't use the same id, and the client interface is not running correctly after the headers disappears (in all navigator)...

bourbourg
10 Jul 2012, 3:14 AM
Here some extract of my code : First, LoaderX is the following composant running when clicking on the corresponding item in the menu of my extJs application:


LoaderX = function(title,libelle, code){
if (title == null){
title = "saisieX";
}
var panelToSearch = mainTabPanel.queryById(title);
if(panelToSearch==null){
var yColumns = Ext.create('Ext.data.Store', {
model : "YColumns"
proxy : {
type : 'ajax',
url : '... one url ...',
reader : {
type : 'json',
root : 'records'
}
},
autoLoad : true
});
yColumns.on('load',function(store,records,successfull,operation,eOpts){
var xGridPanel = new XGridPanel(store,records,title,libelle, code);
mainTabPanel.add(xGridPanel);
mainTabPanel.setActiveTab(xGridPanel);
});
}else{
mainTabPanel.setActiveTab(panelToSearch);
}
}



Then, this is the XGridPanel component :
I construct the columns of the grid with a loop
and then the grid and i return the grid.
This component is used several times whi different id, and this is when there are two instances of it in the tabpanel that the headers of the tab are crashing (and the ext interface with...)






XGridPanel = function(store, records, idGrid, libelle, code_dept) {
var nbData = store.count();
for (i = 0; i < nbData; i++) {
fieldsArray.push({
name : records[i].raw.index,
type : records[i].raw.type
});
columnArray.push({
text : records[i].raw.libelle,
width : 40,
id : records[i].raw.index,
dataIndex : records[i].raw.index,
hidden : records[i].raw.isHidden
});
}
Ext.define('model.X', {
extend : 'Ext.data.Model',
fields : fieldsArray
});
// STORE X
var xStore = Ext.create('Ext.data.Store', {
model : 'model.X',
proxy : {
type : 'ajax',
url : '/one url...',
reader : {
type : 'json',
root : 'records'
}
},
autoLoad : false
});
xStore.load({
params : {
some params...
}
});
var nextPeriodAction = new Ext.Action({
text : 'Next Period',
iconCls : 'bPeriodSuiv',
handler : function() {
xxGridPanel.store.load({
params : {
mois : xxGridPanel.store.data.items[0].raw.mois ,
annee : xxGridPanel.store.data.items[0].raw.annee,
action : "nextPeriod"
}
});
}
});


some other similars actions...


topToolbarX = new Ext.Toolbar({
layout : {
type : 'table',
columns : 5
},
items : [nextPeriodAction,...]
});






var groupingXByField = Ext.create('Ext.grid.feature.Grouping',
{
groupHeaderTpl : '{[values.rows[0].libelleField]}',
startCollapsed : false
});


// PLUGIN ROWEDITING
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor : 1,
autoCancel : false
});

var idPanelDeGrid;
var titlePanelDeGrid;

if(idGrid!=null & idGrid!= "saisieX"){
idPanelDeGrid = "saisieX" + idGrid;
titlePanelDeGrid = "X "+ libelle;
}else{
idPanelDeGrid = "saisieX";
titlePanelDeGrid = "X";
}

var xxGridPanel = Ext.create('Ext.grid.Panel',
{
id : idPanelDeGrid,
closable : true,
autoWidth : true,
iconCls : 'bSaisieAdmin',
columnLines : true,
tbar : topToolbarX
store : xStore,
border : true,
features : [groupingXByField],
split : true,
columns : columnArray,
plugins : [rowEditing, 'headertooltip']
});


xxGridPanel.on('render', function() {
xStore.group('displayOrder', 'ASC');
xStore.sort('displayOrderField', 'ASC');
});


xxGridPanel.store.on('load', function() {
//Some other code for disabling and/or enabling previous action of the topToolbarX
// and this :
xxGridPanel.setTitle(titlePanelDeGrid);
}
rowEditing.on('beforeedit', function(editor, e) {
if (e.record.data.displayOrderField == "1000") {
return false;
}
if (..some rights tests..) {
return false;
}
});
// SAVE
rowEditing.on('edit', function(editor, e) {
var record = e.record;
record.save({
url : '/controller/createOrUpdate',
failure : function(record, operation) {
diplayErrorMsgBox(
i18n.errorTitle,
operation.request.scope.reader.jsonData["value"]);
}
});
xxGridPanel.store.load({
params : {
mois : xxGridPanel.store.data.items[0].raw.mois,
annee : xxGridPanel.store.data.items[0].raw.annee
}
});
}, this);
return xxGridPanel;
}

bourbourg
10 Jul 2012, 3:36 AM
the complete error in firebug :
37011

After this errors, it's impossible to continue to use the application for the user, the extjs javascript do strange things...

bourbourg
12 Jul 2012, 12:49 AM
Anyone has an idea ?

Thanks you :)

bourbourg
12 Jul 2012, 12:52 AM
It seems to be a problem with the id that are set in columns array that i construct for the grid...

scottmartin
12 Jul 2012, 8:21 AM
As mentioned, hard id's will get you in trouble ;) Use itemId and use query to find the element.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery-method-query

Scott.