PDA

View Full Version : [Solved]Layout within FormPanels



kilrae
22 Nov 2007, 2:08 PM
[Solved: solution is to not set layout on FormPanel and set anchor: "100% 100%" or "100% 0"]

It seems that FormPanel doesn't quite like having internal layouts where container panels have their height limited.

For example, let's say you have a BorderLayout with a multi-tab form in the center region. You want the FormPanel to fill the center region and contain a tab panel that will fill the form panel. You can't do this. The form element has height auto, so it doesn't fill the entire form panel. The form element needs to be sized to fit the containing form panel (at least when using layouts like 'fit', 'anchor', and 'border' on the FormPanel).

* Viewport
** Panel (layout: 'border')
*** Panel (region: 'west')
*** FormPanel (region: 'center', layout: 'fit')
**** TabPanel
***** Panel (layout: 'form')
***** Panel (layout: 'form')



<script type="text/javascript">
Ext.namespace('App');

Ext.onReady(function(){
App.viewport = new Ext.Viewport({
layout: 'fit',
items: {
xtype: 'panel',
layout: 'border',
items: [
{
xtype: 'panel',
title: 'Default panel',
html: 'Default',
region: 'west'
},{
xtype: 'form',
layout: 'fit',
title: 'Form with Tab Panel',
region: 'center',
items: {
xtype: 'tabpanel',
activeTab: 0,
layoutOnTabChange: true,
items: [
{
xtype: 'panel',
layout: 'form',
title: 'One',
items: [
{
xtype: 'textfield',
fieldLabel: 'Field'
},
{
xtype: 'textfield',
fieldLabel: 'Field'
}
]
},{
xtype: 'panel',
layout: 'form',
title: 'Two',
items: [
{
xtype: 'textfield',
fieldLabel: 'Field'
},
{
xtype: 'textfield',
fieldLabel: 'Field'
}
]
}
]
}
}
]
}
});
});
</script>

jsakalos
22 Nov 2007, 3:02 PM
FormPanel has form layout. Try this code:



/*2007-10-29 06:36:55* 2007-10-26 23:14:492007-10-26 23:14:41**
* Ext 2.0 Form Test
* by Jozef Sakalos, aka Saki
*/

// reference local blank image
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';

// some data used in the examples
Ext.namespace('Ext.exampledata');

Ext.exampledata.states = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State'],
['CO', 'Colorado', 'The Mountain State'],
['CT', 'Connecticut', 'The Constitution State'],
['DE', 'Delaware', 'The First State'],
['DC', 'District of Columbia', "The Nation's Capital"],
['FL', 'Florida', 'The Sunshine State'],
['GA', 'Georgia', 'The Peach State'],
['HI', 'Hawaii', 'The Aloha State'],
['ID', 'Idaho', 'Famous Potatoes'],
['IL', 'Illinois', 'The Prairie State'],
['IN', 'Indiana', 'The Hospitality State'],
['IA', 'Iowa', 'The Corn State'],
['KS', 'Kansas', 'The Sunflower State'],
['KY', 'Kentucky', 'The Bluegrass State'],
['LA', 'Louisiana', 'The Bayou State'],
['ME', 'Maine', 'The Pine Tree State'],
['MD', 'Maryland', 'Chesapeake State'],
['MA', 'Massachusetts', 'The Spirit of America'],
['MI', 'Michigan', 'Great Lakes State'],
['MN', 'Minnesota', 'North Star State'],
['MS', 'Mississippi', 'Magnolia State'],
['MO', 'Missouri', 'Show Me State'],
['MT', 'Montana', 'Big Sky Country'],
['NE', 'Nebraska', 'Beef State'],
['NV', 'Nevada', 'Silver State'],
['NH', 'New Hampshire', 'Granite State'],
['NJ', 'New Jersey', 'Garden State'],
['NM', 'New Mexico', 'Land of Enchantment'],
['NY', 'New York', 'Empire State'],
['NC', 'North Carolina', 'First in Freedom'],
['ND', 'North Dakota', 'Peace Garden State'],
['OH', 'Ohio', 'The Heart of it All'],
['OK', 'Oklahoma', 'Oklahoma is OK'],
['OR', 'Oregon', 'Pacific Wonderland'],
['PA', 'Pennsylvania', 'Keystone State'],
['RI', 'Rhode Island', 'Ocean State'],
['SC', 'South Carolina', 'Nothing Could be Finer'],
['SD', 'South Dakota', 'Great Faces, Great Places'],
['TN', 'Tennessee', 'Volunteer State'],
['TX', 'Texas', 'Lone Star State'],
['UT', 'Utah', 'Salt Lake State'],
['VT', 'Vermont', 'Green Mountain State'],
['VA', 'Virginia', 'Mother of States'],
['WA', 'Washington', 'Green Tree State'],
['WV', 'West Virginia', 'Mountain State'],
['WI', 'Wisconsin', "America's Dairyland"],
['WY', 'Wyoming', 'Like No Place on Earth']
];

// create namespace
Ext.namespace('myForm');

// create application
myForm.app = function() {
// public space
return {
// public methods
init: function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.MsgTarget = 'under';
var form = new Ext.FormPanel({
bodyStyle: 'padding:0px'
,width: 500
,height: 375
,frame: true
,collapsible: true
,style:'margin:24px'
,draggable:true
// ,renderTo: document.body
,title: 'Ext 2.0 Form Test'
,url:'/echo.php'
,items: { // tabpanel
xtype: 'tabpanel'
,activeTab: 0
,defaults: {autoScroll:true, bodyStyle:'padding:8px',labelWidth:100}
,anchor: '100% 0'
,layoutOnTabChange:true
,items: [{ // tabs
title: 'Tab 3'
,layout: 'form'
,hideMode:'offsets'
,items:[{
xtype: 'textfield'
,fieldLabel: 'On third tab'
,name: 'onthirdtab'
,anchor:'100%'
}, {
xtype:'fieldset'
,title:'Fieldset Title'
,header:false
,labelWidth:100
,items:[{
xtype:'textfield'
,fieldLabel:'Some text field'
,anchor:'-5'
}]
}]
},{
layout: 'form'
,title: 'Tab 2'
,items:[{
xtype: 'textfield'
,fieldLabel: 'On other tab'
,name: 'othertab'
,anchor:'100%'
},{
xtype: 'datefield'
,fieldLabel: 'A date'
,id:'date-field'
,name: 'datefield'
,anchor:'100%'
},{
xtype: 'combo'
,store: new Ext.data.SimpleStore({
fields: ['abbr', 'state']
,data: Ext.exampledata.states // from states.js
})
,id:'states-combo'
,displayField:'state'
,mode: 'local'
,triggerAction: 'all'
,fieldLabel: 'States'
,anchor:'100%'
}]

},{
layout: 'column'
,title: 'Tab 1'
,hideMode:'offsets'
,defaults: {
columnWidth:0.5
,layout:'form'
,labelWidth:60
,labelAlign:'right'
}
,items: [{ // columns
defaults: {anchor: '95%'}
,items: [{ // fields
xtype: 'textfield'
,fieldLabel: 'First Name'
,qtip:'jano'
,name: 'first'
}, {
xtype: 'textfield'
,fieldLabel: 'Web page'
,name: 'web'
}, {
xtype: 'combo'
,store: new Ext.data.SimpleStore({
fields: ['abbr', 'state']
,data: Ext.exampledata.states // from states.js
})
,id:'states-combo2'
,displayField:'state'
,mode: 'local'
,triggerAction: 'all'
,fieldLabel: 'States'
}]
}, {
defaults: {anchor: '98%'}
,items: [{
xtype: 'textfield'
,fieldLabel: 'Last Name'
,name: 'last'
}, {
xtype: 'textfield'
,fieldLabel: 'e-mail'
,name: 'email'
}]
}]
}]
}
,buttons:[{
text:'Save'
,handler: function() {
form.getForm().timeout = 5;
form.getForm().submit({
success: function(form, action) {
alert('success');
}
,failure: function(form, action) {
alert('failure');
}
,timeout:5
});
}
}]
,tbar:[]
});
Ext.getCmp('states-combo').setDisabled(true);
Ext.getCmp('date-field').setDisabled(true);

var tbar = form.getTopToolbar();
tbar.push({text:'Test Button'});

form.render(document.body);
}
};
}(); // end of app

// end of file



with this markup:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../extjs-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="form.js"></script>
<!-- A Localization Script File comes here -->
<script type="text/javascript">
Ext.onReady(myForm.app.init, myForm.app);
</script>
<title>Ext 2.0 Form Test</title>
</head>
<body>
<div id="my-form" style="position:relative;top:30px;left:40px;width:600px"></div>
</body>
</html>



This is my form test code maybe with many unnecessary things. Take it as an example.

kilrae
22 Nov 2007, 4:20 PM
I've discovered my problem, I didn't notice that FormLayout extends AnchorLayout.

JorisA
18 Dec 2007, 9:52 AM
I struggled with this for a long time as well, and thnx to this post I finally found the solution. This is what I did:



this.subPanel = new Ext.Panel({
border: false,
layout: 'border',
anchor: "100% 100%",
items:[whatever you want here]
});

this.panel = new Ext.FormPanel({
id: this.id,
border: false,
anchor: "100% 100%",
items:[this.subPanel]
});


You can add every layout you want in the subpanel (I for example used another borderlayout with a tabpanel). When adding forms, just do layout=form in those panels.