PDA

View Full Version : Unable to decrease the height of form panel



sachin sachdeva
31 Mar 2011, 6:05 AM
Hi i am using form panel my problem is i am note able to decrease the height of the form panel....my code is


function checkinFile(node) {
var foldername = node.text;
var folderid = node.id;
assetwindow = new Ext.FormPanel({
title : 'Asset Check-In',
autoScroll : 'auto',
id : 'asset_checkin',
closable : true,
frame : true,
autoWidth : true,
labelWidth : 100,
monitorValid : true,

autoRegion : true,
height : 150,
defaults : {
width : 250
},

items : [{
html : "<b>Fill the required fields to check in<b><br /><br />"


}, {
fieldLabel : 'Title<span style="color:red">*</span>',
xtype : 'textfield',
name : 'title',
id : 'title',
minLength : 0,
maxLength : 250,
allowBlank : false
},
{
fieldLabel : 'Folder Selected<span style="color:red">*</span>',
name : 'folder',
xtype : 'textfield',
value : foldername,
readOnly : true,
disabled : true,
allowBlank : false
}, new Ext.form.ComboBox({
editable : false,
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
selectOnFocus : true,
emptyText : 'Select the Security Group...',
valueField : 'myId',
fieldLabel : 'Security Group<span style="color:red">*</span>',
name : 'securityGroup',
displayField : 'displayText',
allowBlank : false,
id : 'securityGroup'
})
, new Ext.form.DateField({
fieldLabel : 'Release Date<span style="color:red">*</span>',
format : 'm/d/Y', // DD/MM/YYYY
name : 'releaseDate',
id : 'releaseDate',
vtype : 'daterange',
vtypeText : 'date should be in mm/dd/yyyy format',
region : 'center',
width : 200,
editable : false,
expiryDateField : 'expiryDate',
minValue : (new Date()).clearTime(),
allowBlank : false
}), new Ext.form.DateField({
fieldLabel : 'Expiration Date<span style="color:red">*</span>',
format : 'm/d/Y', // DD/MM/YYYY
name : 'expiryDate',
id : 'expiryDate',
vtype : 'daterange',
vtypeText : 'date should be in mm/dd/yyyy format',
region : 'center',
width : 200,
editable : false,
allowBlank : false,
minValue : (new Date().add(Date.DAY, 1)).clearTime(),
releaseDateField : 'releaseDate'
}),
{
xtype : 'textarea',
fieldLabel : 'Comments',
name : 'comments',
minLength:0,
maxLength :2000,
height : 45,
allowBlank : true
}, {
xtype : 'textarea',
name : 'tags',
height : 45,
fieldLabel : 'Tags',
minLength:0,
maxLength :2000,
allowBlank : true
}, {
fieldLabel : 'Account',
name : 'account',
xtype : 'textfield',
readOnly : true,
allowBlank : false
}, new Ext.form.ComboBox({
editable : false,
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
selectOnFocus : true,
emptyText : 'Searchable...',
valueField : 'Searchableid',
fieldLabel : 'Searchable',
name : 'Searchable',
displayField : 'Searchable',
allowBlank : true,
id : 'searchable'
}),


],

buttons : [{
text : 'Check In',
formBind : true,
handler : function() {

}
}, {
text : 'Reset',
handler : function() {

}
}]
// tools : tooltips,

});
mainTabPanel.add(assetwindow);
assetwindow.show();
}

Screamy
31 Mar 2011, 10:12 AM
I see at the bottom of the code that your form is being added directly to a TabPanel. I believe that the default layout for any component added to a TabPanel is 'fit', meaning that you will have absolutely no control over the dimensions of your form.

You'll need to add your form to a parent panel. Here's a code snippet you can run in the Firebug console (assuming you first open a page which loads Ext) to illustrate my point:



var form = new Ext.form.FormPanel({
height: 400,
title: 'My Form',
items: [{
xtype: 'textfield',
fieldLabel: 'lastName',
name: 'lastName'
},{
xtype: 'textfield',
fieldLabel: 'firstName',
name: 'firstName'
}]
});


var tabPanel = new Ext.TabPanel({
activeTab: 0,
items: [{
xtype: 'panel',
title: 'Custom Height Form',
items: [form]
}]
});


var win = new Ext.Window({
height: 500,
width: 500,
items: [tabPanel]
});

win.show();


Note that this will most likely be critiqued as 'over nesting', plus no specific layout is declared for the container panel of the form; regardless, it gives the desired effect....

sachin sachdeva
31 Mar 2011, 9:32 PM
thanx screamy......for clearing my doubts:)