ext.js 2.3中表单字段之间的注释

时间:2016-04-15 10:46:01

标签: forms extjs comments

我是ext.js的新手,这对你们中的一些人来说似乎很容易,但对我来说却不是。 我有一个使用ext.js版本2.3构建的表单。我试图在表单字段之间放置注释。我的意思是:

  • inputLabel1:文本输入法
  • commentLabel:some text
  • inputLabel2:文本表单字段

我在上面的第二行遇到了困难。我不需要它作为输入字段 - 只是一个标签和旁边的一些文本,它们与表格标签和其余行的输入字段对齐。

输入字段定义如下:

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

1 个答案:

答案 0 :(得分:1)

有多种方法可以做到这一点我确定。这是使用css和readOnly字段对其进行排序的快速方法

fiddle

  list.RemoveAll(book => String.Equals(book.Author, "AuthorToDelete")); 

enter image description here

This page有一些很好的ext 2.3示例,但为什么不学习更新的版本呢?