PDA

View Full Version : Gridpanel can't be displayed on TabPanel after closed and opened again



faliqulamin
6 Sep 2012, 8:13 AM
Hello ALL,

I apologize if this question has been answered before, and sorry for my english
I have a problem when I tried to show gridpanel into TabPanel, the first time I opened the TabPanel, gridpanel can displayed but when the tab panel is closed and reopened, gridpanel can not be displayed
HELP ME PLEASE
Is there something wrong with my source code below?

MainPanel SourceCode

Ext.require(['*']);
Ext.onReady(function() {
var cw;

Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
xtype:'container',
region: 'north',
//collapsible: true,
title: 'North',
split: false,
height: 90,
minHeight: 60,

//html: 'north',
layout: {
type: 'border' //, digunakan untuk menambhkan space antar item
//padding: 5
},
items: [{
xtype : 'toolbar',
region : 'south',
height : 30,
items : [ {
text : 'System',
menu : {
xtype : 'menu',
plain : true,
region : 'east',
items : [ {
text : 'Ganti Password'
}, {
text : 'User Management',
scope : this,
handler : function(){
AddTabs('User Management','user');
}
},{
text : 'Logout'
} ]
}
}, {
text : 'Master Data',
menu : {
xtype : 'menu',
plain : true,
items : [ {
text : 'Transmisi',
scope : this,
handler : function(item){
Ext.getCmp('TabCenterPanel').displayScreen(item.screenType);
},
screenType : 'belajar.form.RoleForm'
}, {
text : 'Network Element (NE)'
},{
text:'Modul'
},{
text:'Customer'
} ]
}
}, {
text : 'Data link',
menu : {
xtype : 'menu',
plain : true,
items : [{
text:'Data Channel'
},{
text:'Simulasi PerPu'
}]
}
}]
}, {
//title: 'South Western',
xtype:'container',
region: 'center',
flex: 1,
minWidth: 80,
html : '<img src="src/img/head.png" alt="Telkom Siaga" height="60" width="441" />'
}]
},{
id : 'TabCenterPanel',
xtype : 'panel',
region : 'center',
items:[mainTabPanel]
},{
region: 'east',
collapsible: true,
floatable: true,
split: true,
width: 200,
minWidth: 120,
minHeight: 140,
title: 'Info Transmisi',
layout: {
type: 'vbox',
padding: 5,
align: 'stretch'
}
}, {
xtype : 'toolbar',
region : 'south',
height : 20,
items : [ {
text : 'current user : endy',
xtype : 'label'
} ]
}
]
});
});



TabPanel SourceCode

var tab1 = {
id:'tab-1',
//contentEl:'pnl-tab1',
title: 'Home',
viewConfig: {layout:'fit'},
closable: true
}


var mainTabPanel = new Ext.TabPanel({
id:'mainTabPanel',
region: 'center',
activeTab: 0,
items: [tab1]
});

function AddTabs(tabTitle,yourTabId){
var YourTabPanel = Ext.getCmp('mainTabPanel');
var TabToCheck = YourTabPanel.getChildByElement(yourTabId);
if(TabToCheck){
YourTabPanel.setActiveTab(yourTabId);
} else {
YourTabPanel.add({
title:tabTitle,
id:yourTabId,
closable:true,
layout: 'fit',
items :[grid3]
}).show();
}
YourTabPanel.doLayout();
}


GridPanel SourceCode

var grid3 = new Ext.grid.Panel({ //store: getLocalStore(),
columns: [
Ext.create('Ext.grid.RowNumberer'),
{text: "Company", flex: 1, sortable: true, dataIndex: 'company'},
{text: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{text: "Change", width: 120, sortable: true, dataIndex: 'change'},
{text: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
{text: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
],
dockedItems: [{
xtype: 'toolbar',
items: [{
text:'Tambah',
tooltip:'Tambah data'
}, '-', {
text:'Edit',
tooltip:'Pilih data Terlebih dahulu'
},'-',{
itemId: 'removeButton',
text:'Hapus',
tooltip:'Remove the selected item',
}]
}],
columnLines: true,
region:'center',
layout : 'fit',
title:'Data User'

});

First Time
38510


After Closed TabPanel and Reopen it
38511


thank you before

Tim Toady
6 Sep 2012, 10:04 AM
Your grid is probably being destroyed when you close your tab. Then you try to add it again and the variable references nothing. You probably need to recreate the grid rather than using the old variable or handle it another way.

See paragraph 2 http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel

scottmartin
6 Sep 2012, 11:59 AM
Please see the following:
http://www.sencha.com/forum/showthread.php?214648

Scott.

faliqulamin
7 Sep 2012, 4:39 AM
Thanks scottmartin

(http://www.sencha.com/forum/member.php?165873-scottmartin)It worked. THANKS THANKS THANKS