Kommentare zwischen Formularfeldern in ext.js 2.3

Question

Ich bin neu zu ext.js und das mag für einige von euch einfach scheinen, aber nicht für mich. Ich habe ein Formular, das mit ext.js Version 2.3 erstellt wird. Ich versuche, Kommentare zwischen den Formularfeldern zu platzieren. Ich meine folgend:

• inputLabel1: Textform Eingang
• commentLabel: some text
• inputLabel2: Textformularfeld

Ich habe Schwierigkeiten mit der zweiten Zeile oben. Ich brauche es nicht als ein Eingabefeld - nur eine Beschriftung und ein Text daneben, die mit den Formularbeschriftungen und Eingabefeldern auf den restlichen Zeilen ausgerichtet sind.

Eingabefelder sind wie folgt definiert:

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 
}); 

Dann werden ihnen in Behälter gegeben werden:

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] 
     } 
     ] 
    }; 

Letzteres in Feldsätzen angeordnet sind:

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] 
     } 
     ] 
    }; 

Und weiter:

Und wieder:

var lineItemsContainer = new Ext.form.FieldSet({ 
    id: 'lineItemsContainer', 
    name: 'lineItemsContainer', 
    header: false, 
    border: false, 
    height: 'auto', 
    anchor: '100%', 
    items: [ 
    toggleSingleMultyContainer, 
    singleLineItemContainer, 
    multipleLineItemsContainer, 
    currencyAndExchangeSet 
    ] 
}); 

Und wieder:

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 
    ] 
}); 

Der obige Code platziert wird in

Ext.extend(receiptForm, Ext.form.FormPanel,{ 
    initComponent: function(){ 
    above code 
    } 
} 

Answer 1

ist es mehrere Möglichkeiten, dies zu tun, ich bin sicher. Hier ist eine schnelle Art und Weise zu sorta es zu hacken mit CSS und nur lesbaren Feldern

fiddle

items: [{ 
    fieldLabel: 'inputLabel1', 
}, { 
    fieldLabel: 'commentLabel', 
    readOnly:true, 
    style:'background: transparent;border: none;', 
    value:'some text', 
}, { 
    fieldLabel: 'inputLabel2', 
}], 

This page hat einige netten ext 2.3 Beispiele, aber warum nicht mit einer neueren Version lernen?