My problem is that when I open a grid in a tab and close it, when I will open it again the layout crashes as you can see in image 2.
So this is the normal view of my app when I open the Granjas grid first time:
one_grid.png
Now in the following image, you can see what happens after I close the tab and try to open it again:
two_grid.png
*** VERY IMPORTANT: ***
This bug doesn't happens in ext 4.0.
It happens only in 4.1 and 4.1.1.
***
I had no problems with extjs3 tabs and grids, but now with extjs4 I am having headaches.
***Correction: The bellow viewport code doesnt works in any extjs4 versions, but this one:
Code:
tabs = Ext.getCmp('tabpanel_principal');
tab = tabs.add(new Carregamentos.view.GranjasGrid());
tabs.setActiveTab(tab);
works with extjs4.0 throwing the following exception: Uncaught TypeError: Cannot read property 'id' of undefinedext-all-debug-w-comments.js:119778
and it doesnt loads the store items
I appreciate your help. Thank you.
Here is my viewport code:
Code:
Ext.define('Carregamentos.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Carregamentos.view.PrincipalGrid'
,'Carregamentos.view.GranjasWin'
,'Carregamentos.view.GranjasGrid'
],
renderTo: Ext.getBody(),
layout: {
type: 'border'
},
showGranjasGrid: function(){
var Tabpanel = Ext.getCmp('tabpanel_principal');
var tab = Ext.getCmp('idgridgranjas');
if(undefined!=tab) { Tabpanel.setActiveTab(tab); return; }
var obj = Tabpanel.add({
title:'Granjas',
xtype:'granjasgrid',
id: 'idgridgranjas',
closable: true,
autoScroll:true
});
Tabpanel.setActiveTab(obj);
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
region: 'north',
padding : '0 10 0 10',
xtype: 'toolbar',
id: 'toolbar_id',
border : false,
frame : false,
height: 50,
items: [
{
xtype: 'button',
text: 'Cadastros',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
icon: 'icone.png',
text: 'Granjas',
listeners:{
}
},
{
xtype: 'menuitem',
text: 'Menu Item',
listeners:{
click: this.showGranjasGrid
}
},
{
xtype: 'menuitem',
text: 'Menu Item',
menu: {
xtype: 'menu',
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Granjas'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
},
{
xtype: 'button',
text: 'Formulário',
listeners: {
click: {
fn: me.onButtonClick1,
scope: me
}
}
},
{
xtype : "tbtext",
id: 'user_nome_id',
text: 'Usuário: <b>Luis</b>'
}]
},
{
xtype: 'tabpanel',
region: 'center',
id: 'tabpanel_principal',
frame: false,
layout: {
type: 'fit'
},
bodyBorder: false,
collapsed: false,
collapsible: false,
overlapHeader: false,
activeTab: 0,
plain: true,
items: [
{
xtype: 'xprincipal',
id: 'principal_id'
}
]
}
]
});
me.callParent(arguments);
}
});
My store code:
Code:
Ext.define('Carregamentos.store.Granjas', {
extend: 'Ext.data.Store',
requires: [
'Carregamentos.model.Granjas'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
storeId: 'GranjasStore',
model: 'Carregamentos.model.Granjas',
pageSize: 3,
proxy: {
type: 'ajax',
api: { create: 'php/controller/proxy.php?action=save',
read: 'php/controller/proxy.php?action=select',
update: 'php/controller/proxy.php?action=save',
destroy:'php/controller/proxy.php?action=delete'
},
extraParams: {
controller: 'Granjas'
},
reader: {
type: 'json',
idProperty: 'id',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
},
writer: {
type: 'json'
}
}
}, cfg)]);
}
});
Problem with grid in tabpanel - urgent please!
Reply With Quote
