I am having problems redering an grid in a a tab panel (Its made with Ext Designer.). the hierarchy is as follows , Viewport. -> tabPanel -> Panel -> Container -> Grid.
This is how its displayed now
Here is the code for viewport
mainWindowUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'mainWindow',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 200,
frame: true,
split: true,
titleCollapse: true,
collapsible: true,
id: 'navigation',
items: [
{
flex: 1,
xtype: 'mytreepanel'
}
]
},
{
xtype: 'tabpanel',
layoutOnTabChange: true,
resizeTabs: true,
defaults: {
layout: 'fit',
autoScroll: true
},
region: 'center',
tpl: '',
id: 'mainTabPanel',
layoutConfig: {
deferredRender: true
}
}
];
mainWindowUi.superclass.initComponent.call(this);
}
});
here is the code to create the tab.. (created from a nav panel programmatically)
var currentTab = tabPanel.findById(node.id);
// If not yet created, create the tab
if (!currentTab){
currentTab = tabPanel.add({
title:node.id,
id:node.id,
closable:true,
items:[{
xtype: 'phasePanel',
layout: 'fit',
autoscroll: true,
}],
autoScroll:true,
});
}
// Activate tab
tabPanel.setActiveTab(currentTab);
here is the code for the panel/container/grid
PhasePanelUi = Ext.extend(Ext.Panel, {
frame: true,
layout: 'anchor',
autoScroll: true,
autoWidth: true,
defaults: '',
initComponent: function() {
this.items = [
{
xtype: 'container',
autoScroll: true,
layout: 'fit',
defaults: {
layout: 'fit',
autoScroll: true
},
id: 'gridHolder',
items: [
{
xtype: 'grid',
title: 'Current Phases',
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
sortable: true,
width: 200
},
{
xtype: 'gridcolumn',
header: 'Estate',
dataIndex: 'estate_name',
sortable: true,
width: 500
}
]
}
]
}
];
PhasePanelUi.superclass.initComponent.call(this);
}
});
i have tried all sorts of binations. but just cant get the grid to render correctly any sort of assistance will be appreciated.
I am having problems redering an grid in a a tab panel (Its made with Ext Designer.). the hierarchy is as follows , Viewport. -> tabPanel -> Panel -> Container -> Grid.
This is how its displayed now
Here is the code for viewport
mainWindowUi = Ext.extend(Ext.Viewport, {
layout: 'border',
id: 'mainWindow',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'Navigation',
region: 'west',
width: 200,
frame: true,
split: true,
titleCollapse: true,
collapsible: true,
id: 'navigation',
items: [
{
flex: 1,
xtype: 'mytreepanel'
}
]
},
{
xtype: 'tabpanel',
layoutOnTabChange: true,
resizeTabs: true,
defaults: {
layout: 'fit',
autoScroll: true
},
region: 'center',
tpl: '',
id: 'mainTabPanel',
layoutConfig: {
deferredRender: true
}
}
];
mainWindowUi.superclass.initComponent.call(this);
}
});
here is the code to create the tab.. (created from a nav panel programmatically)
var currentTab = tabPanel.findById(node.id);
// If not yet created, create the tab
if (!currentTab){
currentTab = tabPanel.add({
title:node.id,
id:node.id,
closable:true,
items:[{
xtype: 'phasePanel',
layout: 'fit',
autoscroll: true,
}],
autoScroll:true,
});
}
// Activate tab
tabPanel.setActiveTab(currentTab);
here is the code for the panel/container/grid
PhasePanelUi = Ext.extend(Ext.Panel, {
frame: true,
layout: 'anchor',
autoScroll: true,
autoWidth: true,
defaults: '',
initComponent: function() {
this.items = [
{
xtype: 'container',
autoScroll: true,
layout: 'fit',
defaults: {
layout: 'fit',
autoScroll: true
},
id: 'gridHolder',
items: [
{
xtype: 'grid',
title: 'Current Phases',
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
columns: [
{
xtype: 'gridcolumn',
header: 'Name',
dataIndex: 'name',
sortable: true,
width: 200
},
{
xtype: 'gridcolumn',
header: 'Estate',
dataIndex: 'estate_name',
sortable: true,
width: 500
}
]
}
]
}
];
PhasePanelUi.superclass.initComponent.call(this);
}
});
i have tried all sorts of binations. but just cant get the grid to render correctly any sort of assistance will be appreciated.
Share Improve this question asked Feb 21, 2011 at 7:18 Jinah AdamJinah Adam 1,1252 gold badges14 silver badges27 bronze badges 4- 1 are you referring to the grid not filling the height correctly? – JamesHalsall Commented Feb 21, 2011 at 8:54
- yea. it works if i set the height property but i need to 'fit' so it would be filled on all screen resolutions – Jinah Adam Commented Feb 21, 2011 at 9:14
- Code looks fine... But in image is some misunderstanding: from where appears fieldset (with title "Basic Information") ? – Zango Commented Feb 23, 2011 at 6:13
- i remove the basic information part from the code when i showed it here. i thought it was not relavant to the issue. – Jinah Adam Commented Feb 24, 2011 at 6:38
3 Answers
Reset to default 3Your currentTab needs a layout of 'fit' also... you gave the phasePanel a layout of 'fit' and the container within the phasePanel a layout of 'fit', but you did not give the currentTab a layout of 'fit'...
The layout refers to how child items will be laid out within a container... and not how an item will fit into its container. So if you want an item to fit to its container, set layout:'fit' on the container, not the item.
You must set in the grid autoHeight: true
xtype: 'grid',
title: 'Current Phases',
autoHeight: true,
store: 'PhaseStore',
autoDestroy: false,
viewConfig: '',
deferRowRender: false,
autoLoad: '',
ref: '../phaseGrid',
id: 'phaseGrid',
And you can set in gridView the autoFill and forceFit attributes.
i seem to have solved the issue.
i removed the layout bit pletely from the dynamic tab. i guess now it just picks the layout from the defaults. (still peculiar behavior :S)