PDA

View Full Version : Grid inside Tab Problem



antoine.kahale
6 Jun 2013, 2:01 AM
Hello,
We are working on the sencha version 4.2.0
We don't need to add the grid directly as an item for the tab, we need to add an html in each tab and render the grid in this tabs, the same is done in this example.
We drag and drop component in the tab as a container, so we are rendering the items dynamically and it's not statically defined.

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"
});

slemmon
7 Jun 2013, 1:28 PM
So, grid1 isn't actually rendered into the tab1 div until dropped in some drag / drop operation then, correct?

antoine.kahale
9 Jun 2013, 9:58 PM
It's rendered in the tab1 but grid2 is not rendered in the tab2

slemmon
12 Jun 2013, 3:58 PM
Sorry, I'm still not totally sure what you're looking to be able to do just yet. Can you elaborate?