PDA

View Full Version : Tabs Title Is disappearing



antoine.kahale
3 Jun 2013, 6:03 AM
Hello all,
I have a tab panel contains 3 tabs.
In each tabs, i have a grid with headers columns.
When i am running this tab panel, the grid headers columns appeared only in the first tab.
In the second and third tab, the grid headers columns didn't appear.

You can find also the attachment pics, i took a screen shot for the tabs.

The same error is reproduced also when i have tab panel as a children inside each tab.
The tab titles for the tab panel children disappeared.

Any help please.
Thanks!

slemmon
5 Jun 2013, 9:53 AM
Can you share a code snippet that reproduces the issue you're seeing? Also, what ExtJS version are you working with?

antoine.kahale
6 Jun 2013, 1:43 AM
Hello,
I am working on the sencha version 4.2.0
This is a sencha code example, we don't want to add the grid directly in the tab as an item.
We need to create an html and render the grid in this html because we drag and drop the component in the tab and the item is not defined by default. It's a framework and it should be dynamic.

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.tab.Panel', {
id : component.id+"_tab",
width: 500,
height: 300,
border: true,
items: [
{
title: 'Tab 1',
html: "<div id=\"tab1\" style=\"width:100%;height:100%\"></div>",
},
{
title: 'Tab 2',
html: "<div id=\"tab2\" style=\"width:100%;height:100%\"></div>",
}
],
renderTo: Ext.getDom(component.id)
});

Ext.create('Ext.grid.Panel',{
id : component.id+"_grid1",
height: 200,
width: 400,
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
renderTo: "tab1"
});

Ext.create('Ext.grid.Panel',{
id : component.id+"_grid2",
height: 200,
width: 400,
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
renderTo: "tab2"
});