PDA

View Full Version : How to vertically fit a textArea in a form panel



ppolyzos
7 Dec 2007, 7:27 AM
I am using the following code:


var getRfqItemFormPanel = function(rfqItemId){
//Textfield related to the brand
var rfqItemBrandField = new Ext.form.TextField({
fieldLabel: 'Εταιρεία',
name: 'rfqItemBrand',
anchor: '100%',
emptyText: 'Εταιρεία...'
});

//Text field related to the model
var rfqItemModelField = new Ext.form.TextField({
fieldLabel: 'Μοντέλο',
name: 'rfqItemModel',
anchor: '100%',
emptyText: 'Μοντέλο...'
});

//Text area for general info
var rfqItemInfoField = new Ext.form.TextArea({
fieldLabel: 'Γενικά Στοιχεία',
name: 'rfqItemInfo',
allowBlank: false,
anchor: '100%',
emptyText: 'Εισάγετε Γενικά Στοιχεία Για Τον Μειοδοτικό Διαγωνισμό...'
});

//Form panel for the rfq item
var rfqItemFormPanel = new Ext.form.FormPanel({
title: 'Item: ' + rfqItemId,
baseCls: 'x-plain',
labelWidth: 55,
defaultType: 'textfield',
labelAlign: 'left',
bodyStyle: 'padding: 5px',
layout: 'form',
plain: true,
iconCls: 'meidoitikoi-diagonismoi',
items: [rfqItemBrandField, rfqItemModelField, rfqItemInfoField]
});

return rfqItemFormPanel;
}


And the code for the window to display it:

//Window with the rfq submit form
var window = new Ext.Window({
title: 'Συμμετοχή Στον Διαγωνισμό',
width: 600,
height: 350,
layout: 'fit',
bodyStyle: 'padding:5px;',
buttonAlign: 'right',
items: [getTotalRfqItemsTabPanel(rfqItems)],
buttons: [{
text: 'Αποστολή',
hanlder: function(){
alert('Sending....');
}
}]
});

window.show();

The problem is that I can't make the text area fit (resize) vertically to the panel.
The result can be seen at the attached file.

When using labelAlign: 'top' there is no problem at all and all elements are resized properly.

Any suggestion