我是ext.js的新手,这对你们中的一些人来说似乎很容易,但对我来说却不是。 我有一个使用ext.js版本2.3构建的表单。我试图在表单字段之间放置注释。我的意思是:
我在上面的第二行遇到了困难。我不需要它作为输入字段 - 只是一个标签和旁边的一些文本,它们与表格标签和其余行的输入字段对齐。
输入字段定义如下:
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
} );
然后将它们放在容器中:
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]
}
]
};
后者放在字段集中:
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]
}
]
};
再次:
var singleLineItemContainer = new Ext.form.FieldSet( {
id: 'singleLineItemContainer',
name: 'singleLineItemContainer',
cls: 'singleLineItemContainer',
isActive: true,
hideLabel: true,
height: 'auto',
items: [
referenceCurrency,
receiptType,
entertainmentType,
receiptFinancialData
]
} );
再次:
var lineItemsContainer = new Ext.form.FieldSet( {
id: 'lineItemsContainer',
name: 'lineItemsContainer',
header: false,
border: false,
height: 'auto',
anchor: '100%',
items: [
toggleSingleMultyContainer,
singleLineItemContainer,
multipleLineItemsContainer,
currencyAndExchangeSet
]
} );
再次:
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
]
} );
上面的代码放在
中Ext.extend( receiptForm, Ext.form.FormPanel,{
initComponent: function(){
above code
}
}