PDA

View Full Version : help with formpanel width & height



alupuli
29 Jan 2010, 5:22 AM
My previous post never came up in the list.
sorry for posting again.

got a formpanel as below.
but it takes 100% of the width,height even if specified width/height in config.
Instead needs to show form in a small container like in the sample.

http://www.extjs.com/deploy/dev/examples/form/dynamic.html

Is it possible to create another container and render form in that instead of directly adding to centerRegion.






Ext.onReady(function () {
Ext.QuickTips.init();
var centerCardPnl = new Ext.Panel({
layout: 'card',
id: 'MIDDLE_LIST_AREA',
activeItem: 0,
items: [{
html: '<a></a>'
}]
});
var centerPnl = new Ext.Panel({
layout: 'fit',
border: false,
items: centerCardPnl
});
var viewport = new Ext.Viewport({
layout: 'border',
width: '100%',
border: false,
items: [{
region: 'north',
border: false,
margins: '0 0 0 0',
html: '<div class="x-panel-header">Home<div>'
},
{
region: 'west',
id: 'LIST_COLLECTION',
split: true,
width: 150,
minSize: 150,
maxSize: 200,
collapsible: true,
margins: '5 0 0 5',
border: false,
layout: {
type: 'auto',
hideCollapseTool: true,
titleCollapse: true,
animate: true
},
items: [{
html: "<div style='width:100%' id='LEFTDOC_LIB_LIST'></div>",
border: false
},
{
html: "<div style='width:100%' id='LEFTLIST_LIB_LIST'></div>",
border: false
}]
},
{
region: 'center',
layout: 'fit',
id: 'CENTER_REGION',
border: false,
items: centerPnl
}]
});
var myForm = new Ext.FormPanel({
labelWidth: 150,
url: 'save-form.php',
frame: true,
title: 'New Item',
bodyStyle: 'padding:5px 5px 0',
width: 670,
height: 200,
id: 'EditTask',
defaults: {
autoScroll: true
},
defaultType: 'textfield'
});
//add save cancel buttons
myForm.addButton(' OK ', function () {});
myForm.addButton(' Cancel ', function () {});
var centerRegion = Ext.getCmp('MIDDLE_LIST_AREA');
centerRegion.add(myForm);
centerRegion.layout.setActiveItem(myForm.getId());
centerRegion.layout.activeItem.doLayout();
});