comments between form fields in ext.js 2.3 - forms

Question

I am new to ext.js and this may seem easy to some of you but not to me.
I have a form that is build with ext.js version 2.3. I am trying to place comments between the form fields. I mean the following:
inputLabel1: text form input
commentLabel: some text
inputLabel2: text form field
I am having difficulty with the second line above. I don't need it to be an input field - just a label and some text next to it, which are aligned with the form labels and input fields on the rest of the rows.
Input fields are defined as follows:
var formParts =
this.formParts = [];
var receiptAmount = new Ext.Form.NumberField( {
id: 'receiptAmount',
name: 'receiptAmount',
cls:'inputNoRightBorder ',
fieldLabel: messages.amount,
allowNegative: true,
hideLabel: false,
decimalSeparator: messages.decimalSeparator,
decimalPrecision: 2,
groupingSeparator: messages.groupingSeparator,
value: 0,
labelSeparator: messages.asteriskLineBreaker
} );
Then they are placed in containers:
var grossAmount = {
border: false,
layout: 'column',
labelWidth: 190,
cls: 'labelStyle',
border: true,
baseCls: 'ourPanel',
items: [
{
id: 'receiptAmountContainer',
border: false,
layout: 'form',
items: [receiptAmount]
},
{
id: 'receiptCurrencyContainer',
border: false,
layout: 'form',
items: [receiptCurrency]
}
]
};
The latter are placed in field sets:
var receiptFinancialData = {
id: "receiptFinancialData",
border: false,
layout: 'column',
labelWidth: 120,
cls: 'column-style',//'#background-color: #DFE8F6',
border: true,
baseCls: 'ourPanel',
height: 50,
title: messages.taxRate + ':',
header: false,
items: [
receiptExchangeRateMirror,
receiptExchangeAmountMirror,
{
border: false,
layout: 'form',
items: [grossAmount]
},
{
border: false,
layout: 'form',
cls: 'labelStyle',
items: [taxRate]
}
]
};
And again:
var singleLineItemContainer = new Ext.form.FieldSet( {
id: 'singleLineItemContainer',
name: 'singleLineItemContainer',
cls: 'singleLineItemContainer',
isActive: true,
hideLabel: true,
height: 'auto',
items: [
referenceCurrency,
receiptType,
entertainmentType,
receiptFinancialData
]
} );
And again:
var lineItemsContainer = new Ext.form.FieldSet( {
id: 'lineItemsContainer',
name: 'lineItemsContainer',
header: false,
border: false,
height: 'auto',
anchor: '100%',
items: [
toggleSingleMultyContainer,
singleLineItemContainer,
multipleLineItemsContainer,
currencyAndExchangeSet
]
} );
And again:
var generalData = new Ext.form.FieldSet( {
id: 'generalReceiptData',
name: 'generalReceiptData',
header: false,
border: false,
height: 'auto',
anchor: '100%',
items: [
receiptClass,
{
id: 'generalDataReceiptCountryAndDate',
border: false,
layout: 'column',
labelWidth: 120,
cls: 'column-style',//'#background-color: #DFE8F6',
border: true,
baseCls: 'ourPanel',
height: 50,
header: false,
items: [
{
id: 'generalDataReceiptDate',
border: false,
layout: 'form',
cls: 'dateField',
items: [receiptDate]
},
{
id: 'generalDataReceiptCountry',
border: false,
layout: 'form',
items: [receiptCountry]
}
]
},
receiptDateString,
receiptDescription,
isCompanyPaid,
lineItemsContainer
]
} );
The code above is placed in
Ext.extend( receiptForm, Ext.form.FormPanel,{
initComponent: function(){
above code
}
}

Answer 1

There's multiple ways to do this I'm sure. Here's a quick way to sorta hack it with css and readOnly fields
fiddle
items: [{
fieldLabel: 'inputLabel1',
}, {
fieldLabel: 'commentLabel',
readOnly:true,
style:'background: transparent;border: none;',
value:'some text',
}, {
fieldLabel: 'inputLabel2',
}],
This page has some nice ext 2.3 examples, but why not learn with a newer version?