PDA

View Full Version : Grid Panel with DockedItems in TabPanel returning me.dom.style error



luciusbsd
29 Feb 2012, 3:32 PM
hello guys, i'm new with extjs framework.
i'm developing a app for my company and i'm having a problem with grid in tabs.
once loaded app, everything works fine but when i close the tab and open again, the console shows a error:

TypeError: 'undefined' is not an object (evaluating 'me.dom.style')

browsers: ff 9.0.1 / safari 5.1.3
extjs version: 4.0.7

i made a screencast to show this error better.

http://www.youtube.com/watch?v=KK_zgUL2JOU

my codes:

controller







Ext.define('Bugs.controller.TabPanel',{

extend: 'Ext.app.Controller',
stores: ['TabPanel'],
models: ['TabPanel'],

views: [
'GridForTab'
],

init: function(){
this.control({
'button':{
click: this.insert
}
})
},
insert: function(btn){

if (btn.xtypeClass) {
var tabCentral = Ext.getCmp('tabCentral');
var novaAba = tabCentral.items.findBy(function(aba){
return aba.title === titulo;
});
if (!novaAba) {

tabCentral.add({
title: 'Tab Grid',
closable: true,
layout: 'auto',
items: {
xtype: btn.xtypeClass
}
}).show();
}else{
tabCentral.setActiveTab(novaAba);
}
}
}
});












view







Ext.define('Bugs.view.GridForTab' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.gridfortab',
columnLines: true,
border: false,
store: 'TabPanel',
//selModel: Ext.create('Ext.selection.CheckboxModel'),
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
header: 'Coluna 1',
dataIndex: 'id',
flex: 1
},
{
header: 'Coluna 2',
dataIndex: 'nome',
flex: 1
},
{
header: 'Coluna 3',
dataIndex: 'endereco',
flex: 1
},
{
header: 'Coluna 4',
dataIndex: 'cep',
flex: 1
}

],
dockedItems: [
{
xtype: 'pagingtoolbar',
store: 'TabPanel',
displayInfo: true,
dock: 'bottom'
}
]
}

);












thanks for all

arthurakay
1 Mar 2012, 7:27 AM
It's hard to tell from your limited code samples, but if I had to guess I would say it's likely the result of a hard-coded component ID or something like that.

In other words, you have the component loaded once. Then you destroy it... but something (a DOM element, a reference of some kind) is not properly destroyed, OR something required by your component is destroyed with the first instance and no longer available.

But that's just a guess. I need more code to help you debug.

luciusbsd
1 Mar 2012, 8:23 AM
Firstly, thanks for reply.
Follows all the code needed for reproduce the problem.

App.js


Ext.Loader.setConfig({ enabled: true
});


Ext.application({
name: 'Bugs',
appFolder: 'app',
autoCreateViewport: true,
controllers: [ 'TabPanel'
],


launch: function(){
Bugs.app = this;
}
});

Controller


Ext.define('Bugs.controller.TabPanel',{
extend: 'Ext.app.Controller',
stores: ['TabPanel'],
models: ['TabPanel'],

views: [
'GridForTab'
],

init: function(){
this.control({
'button':{
click: this.insert
}
})
},
insert: function(btn){

if (btn.xtypeClass) {
var tabCentral = Ext.getCmp('tabCentral');
var novaAba = tabCentral.items.findBy(function(aba){
return aba.title === titulo;
});
if (!novaAba) {


tabCentral.add({
title: 'Tab Grid',
closable: true,
layout: 'auto',
items: {
xtype: btn.xtypeClass
}
}).show();
}else{
tabCentral.setActiveTab(novaAba);
}
}
}
});

Store


Ext.define('Bugs.store.TabPanel', { extend: 'Ext.data.Store',
model: 'Bugs.model.TabPanel',
autoLoad: true,
remoteSort: false,
//pageSize: 3,
proxy: {
simpleSortMode: true,
type: 'ajax',
api: {
read: 'http://127.0.0.1/index.php/fornecedores/fetchAll',
create: 'http://127.0.0.1/index.php/fornecedores/insert',
update: 'http://127.0.0.1/index.php/fornecedores/update',
destroy: 'http://127.0.0.1/index.php/fornecedores/delete'
},
actionMethods: {
read: 'POST',
create: 'POST',
update: 'POST',
destroy: 'POST'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
encode: true,
root: 'data'
},
extraParams: {
start : 'start',
limit : 'limit',
sort : 'name',
dir : 'ASC',
total: 'total'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'Ops!!! Problemas com o servidor!',
msg: 'Desculpe! Ocorreu algum problema com o servidor. Tente novamente!',
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {

write: function(proxy, operation){

var obj = Ext.decode(operation.response.responseText);

if(obj.success){
Ext.ux.Msg.flash({
msg: obj.msg,
type: 'success'
});
}else{
Ext.ux.Msg.flash({
msg: obj.msg,
type: 'error'
});
}
}

}

});



Model

Ext.define('Bugs.model.TabPanel', {
extend: 'Ext.data.Model',
fields: [
{
name: 'id',
type: 'integer'
},
{
name: 'nome',
type: 'string'
},
{
name: 'endereco',
type: 'string'
},
{
name: 'cep',
type: 'string'
}
]
});


ViewPort


Ext.define('Bugs.view.Viewport', { extend: 'Ext.container.Viewport',
layout: 'auto',
initComponent: function(){
var me = this;
me.items = [
{
xtype: 'panel',
layout: {
type: 'auto'
},
items:[{
xtype: 'button',
text: 'Add Tab',
xtypeClass: 'gridfortab',
margin: '5'

},
{
xtype: 'tabpanel',
activeTab: 0,
padding: '5',
id: 'tabCentral',
height: 300

}

]
}];
me.callParent(arguments);
}
});

View Grid


Ext.define('Bugs.view.GridForTab' ,{ extend: 'Ext.grid.Panel',
alias : 'widget.gridfortab',
autoHeight: true,
columnLines: true,
border: false,
store: 'TabPanel',
//selModel: Ext.create('Ext.selection.CheckboxModel'),
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
header: 'Coluna 1',
dataIndex: 'id',
flex: 1
},
{
header: 'Coluna 2',
dataIndex: 'nome',
flex: 1
},
{
header: 'Coluna 3',
dataIndex: 'endereco',
flex: 1
},
{
header: 'Coluna 4',
dataIndex: 'cep',
flex: 1
}

],
dockedItems: [
{
xtype: 'pagingtoolbar',
store: 'TabPanel',
displayInfo: true,
dock: 'bottom'
}
]
}


);

luciusbsd
1 Mar 2012, 8:29 AM
If I remove the DockedItem with paging toolbar, theres no return of error. :/

arthurakay
1 Mar 2012, 8:34 AM
After you destroy your tab, does the "TabPanel" store still exist in memory? I'm wondering if it got destroyed with the tab/grid... so that when you try to create a new tab, it's trying to reference a store that no longer exists.