PDA

View Full Version : how to layout TabPanel inside Panel better?



kchiu
18 Sep 2009, 1:48 AM
Hi,

I've built a form with a Panel containing a FormPanel in the north (with FieldSet) and a TabPanel in the center:
http://128.250.148.12:8080/examples/textareaForm2.html

There are 2 issues with the tab panel though:


the tab strip appears to still render with background container image even with 'plain: true' set
the TabPanel itself doesn't seem to take the 'padding: ...' property (I'd like the panel itself (not just its inner TextArea) to have a little margin from the edge.)


var viewPort = new Ext.Viewport({
layout:'border' // doesn't work
,bodyStyle: 'padding:10px 10px'
,items: [{
region: 'center'
,bodyStyle: 'padding:10px 10px' // doesn't work
,xtype: 'panel'
,layout: 'border'
,items:[
formCfg
,{
region: 'center'
,xtype: 'tabpanel'
,bodyStyle: 'padding:10px 10px' // works only for tab panel's inner TextArea
,plain: true
,activeTab: 0
,items: [
{xtype: 'textarea', title: 'Details 1'},
{xtype: 'textarea', title: 'Details 2'}
]
}]
,buttonAlign: 'left'
,buttons: [{text: 'Save'},{text: 'Clear'}]
,bbar: new Ext.ux.StatusBar({
defaultText: 'New Record: please fill in the details'
})
}]
});
Any idea how to fix the above?

thanks a lot, cheers.

PS. I know there's layout problems with the buttons and status bar too: I'll open another thread for those issues. Thanks.

Animal
18 Sep 2009, 2:07 AM
OK, using layout: 'fit', I have this in my example/* directory. It works fine, what needs fixing?



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ux/statusbar/css/statusbar.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../ux/statusbar/StatusBar.js"></script>
<script type="text/javascript">
var formCfg = {
region: 'north'
,bodyStyle: 'padding:10px 10px 0'
,xtype: 'form'
,autoHeight: true
,border: false
,title: 'Create New Record'
,items:[{
xtype:'fieldset'
,collapsible: true
,title: 'Record Properties'
,width: 405
,defaults: {width: 270, allowBlank: false, xtype: 'textfield'}
,items: [
{fieldLabel: 'Full Model Name'},
{fieldLabel: 'Abbreviated Name'},
{fieldLabel: 'Version Name'},
{fieldLabel: 'Model Type'},
{fieldLabel: 'Model Reference'},
{fieldLabel: 'Contact'}
]
,listeners:{
collapse: function(p){p.ownerCt.ownerCt.doLayout();}
,expand: function(p){p.ownerCt.ownerCt.doLayout();}
}
}]
};

Ext.onReady(function() {
var viewPort = new Ext.Viewport({
layout:'fit',
bodyStyle: 'padding:10px 10px',
items: {
bodyStyle: 'padding:10px 10px',
xtype: 'panel',
layout: 'border',
items: [
formCfg, {
region: 'center'
,xtype: 'tabpanel'
,bodyStyle: 'padding:10px 10px' // works only for tab panel's inner TextArea
,plain: true
,activeTab: 0
,items: [
{xtype: 'textarea', title: 'Details 1'},
{xtype: 'textarea', title: 'Details 2'}
]
}
],
buttonAlign: 'left',
buttons: [{text: 'Save'},{text: 'Clear'}],
bbar: new Ext.ux.StatusBar({
defaultText: 'New Record: please fill in the details'
})
}
});
});</script>
</head>
<body>
</body>
</html>

Animal
18 Sep 2009, 2:28 AM
Is this the look you had in mind?

Drop this into examples/<anywhere>



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext Buttons</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="../ux/statusbar/css/statusbar.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../ux/statusbar/StatusBar.js"></script>
<script type="text/javascript">
var formCfg = {
region: 'north',
margins: '0 0 10 0',
labelWidth: 130,
bodyStyle: 'padding:10px 10px 0',
xtype: 'form',
height: 240,
title: 'Create New Record',
collapsible: true,
items: [{
xtype:'fieldset',
title: 'Record Properties',
width: 405,
autoHeight: true,
defaults: {anchor: '100%', allowBlank: false, xtype: 'textfield'},
items: [
{fieldLabel: 'Full Model Name'},
{fieldLabel: 'Abbreviated Name'},
{fieldLabel: 'Version Name'},
{fieldLabel: 'Model Type'},
{fieldLabel: 'Model Reference'},
{fieldLabel: 'Contact'}
],
listeners:{
collapse: function(p){p.ownerCt.ownerCt.doLayout();},
expand: function(p){p.ownerCt.ownerCt.doLayout();}
}
}]
};

Ext.onReady(function() {
var viewPort = new Ext.Viewport({
layout:'border',
items: {
region: 'center',
margins: '10 10 0 10',
xtype: 'panel',
layout: 'border',
border: false,
items: [
formCfg, {
region: 'center',
xtype: 'tabpanel',
bodyStyle: 'padding:10px 10px',
plain: true,
activeTab: 0,
items: [
{xtype: 'textarea', title: 'Details 1'},
{xtype: 'textarea', title: 'Details 2'}
],
bbar: new Ext.ux.StatusBar({
defaultText: 'New Record: please fill in the details'
})
}],
buttonAlign: 'left',
buttons: [{text: 'Save'},{text: 'Clear'}],
}
});
});</script>
</head>
<body>
</body>
</html>

kchiu
18 Sep 2009, 2:38 AM
EDIT: this is in response to your first reply.

Hi, thanks for the reply.

The problems are:



The tabstrip is being rendered with the blue background despite 'plain: true', while I'd prefer it to be like this: http://128.250.148.12:8080/examples/textareaForm.html. The reason is that not rendering the tabstrip background gives a stronger impression that the tabpanel is part of the same form.
I'd like to have the tab panel rendered with a small gap from the edge of its container, like Example 5 here: http://www.extjs.com/deploy/dev/examples/form/dynamic.html. But my attempts with "bodyStyle: 'padding:10px 10px'" haven't worked.

Any suggestions?

thanks again.

Animal
18 Sep 2009, 3:01 AM
1. Use your own CSS rules.

2. margins config on border layout items