PDA

View Full Version : Make a GridPanel Fill a Tab



hallikpapa
24 May 2012, 8:11 AM
Here is a basic setup that I have:



Window (layout: 'fit')
|_____ FormPanel
|__items: xtype: 'container'
layout: 'hbox' (top 1/2 is form fields, bottom 1/2 is TabPanel)
items:
|
|_____ form fields
|
|_____TabPanel (layout: 'fit')
|______items:
|____(xtype:'grid', layout: 'fit')

Each tab will have a grid in it. I have not set the width or height in the grid(s), I am just trying to get each grid to fill it's own tab. I remember coming across this problem a long time ago but don't remember how I fixed it. Google has told me to set the grid's layout in the tab to 'fit', but that doesn't seem to be working in my case. Where have I gone wrong?

Thanks!

droessner
24 May 2012, 8:21 AM
Here's an example of how you can do this:


Ext.create('Ext.window.Window', {
layout: 'fit',
autoShow: true,
height: 300,
width: 500,
items: [{
xtype: 'form',
border: false,
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
html: 'some fields'
}, {
xtype: 'tabpanel',
layout: 'fit',
flex: 1,
items: [{
xtype: 'grid',
title: 'First Tab',
store: [],
columns: [{
header: 'test'
}]
}, {
xtype: 'grid',
title: 'Second Tab',
store: [],
columns: [{
header: 'test 2'
}]
}]
}]
}]
}]
});

hallikpapa
24 May 2012, 8:44 AM
Thanks for the reply. When I made the setup like yours, the form elements filled the entire window, and the tabpanel got pushed out of view (creating the html, but not visible). More specifically, I believe it was putting the layout=fit on the formpanel. When I remove just that layout, it reverts back to my original issue.

The original issue being everything is in it's proper place, but I can only see the column headers for the grid(s) in each tab.

droessner
24 May 2012, 8:59 AM
The form panel should have layout fit because it only has one container in it.

hallikpapa
24 May 2012, 9:08 AM
Actually, the FormPanel is setup like this. My drawing my have been confusing:



xtype: 'form',
border: false,
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'container',
//SOME FORM FIELDS & a GRID
}]
},{
flex: 1,
layout: 'fit'
xtype : 'clienttabpanel'
}]


What layout should I use in this case? The only thing not rendering correctly is the grid since I can only see the column headers. Here is the TabPanel:



Ext.define('APP.view.admin.ClientTabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.clienttabpanel',

requires: [
'Ext.ux.TabScrollerMenu',
'APP.view.admin.client.WebsiteGrid'
],
title : 'Accounts',
layout : 'fit',
activeTab: 0,
plugins: [{
ptype: 'tabscrollermenu',
maxText : 15,
pageSize : 5
}],
items: [{
title: 'Websites',
xtype : 'clientwebsitegrid',
layout: 'fit'
},{

droessner
24 May 2012, 9:13 AM
Try the following:



xtype: 'form',
border: false,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[{
xtype: 'container',
//SOME FORM FIELDS
}]
},{
flex: 1,
layout: 'fit'
xtype : 'clienttabpanel'
}]

hallikpapa
24 May 2012, 9:20 AM
OOO, closer, but now some of my form elements disappeared. It shows the list (grid) at the top, but the form fields don't display.

The top 1/2 should have some form elements & a list (grid). The bottom 1/2 has a tabpanel with one grid in each tab. Here is the current layout. Thanks for all the help! I think I need to watch all the layout videos I can after this. :)



border: false,
//layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
xtype: 'container',
flex: 1,
border:false,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: 'Name',
name: 'name',
anchor:'95%'
}, {
fieldLabel: 'Short Name',
name: 'slug',
anchor:'95%'
}]
},{
xtype: 'container',
flex: 1,
layout: 'anchor',
defaultType: 'checkbox',
items: [{
fieldLabel: 'Current',
name: 'current',
anchor:'95%'
},{
fieldLabel: 'Active',
name: 'active',
anchor:'95%'
}]
},{
xtype : 'clientadminlist'
}]
},{
//flex: 1,
xtype : 'clienttabpanel'
}]

hallikpapa
24 May 2012, 9:28 AM
Adding this to the form seems to have worked out for me. But since you got me there, I will accept your answer.

layout: {
type: 'vbox',
align: 'stretch'
},

Can you suggest some posts and/or videos to watch to get up to speed on best way to use layouts?