在和Ext JS表單中，如何使某些字段寬度比其他字段寬？

Question

在Ext JS表單中，我可以在表單本身中定義labelWidth 。

但是在這種情況下，我希望某些標簽（標題）具有更寬的寬度。

然而，即使我將它們定義明確 ，他們仍然一樣寬的人：

我當然可以將它們全部更改為更寬的寬度，但這也不可取 ：

如何定義所有字段的寬度為100，而標題字段的寬度為200？

這是當前代碼：

var form_left = new Ext.FormPanel({
    frame:true,
    labelWidth: 100,
    labelAlign: 'left',
    bodyStyle:'padding:10px',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    items: [{
            fieldLabel: 'BASE PRODUCT',
            itemCls: 'form_row_header',
            labelSeparator: '',
            labelWidth: 200
        },{
            fieldLabel: 'Product',
            value: 'Brochure'
        },{
            fieldLabel: 'Format',
            value: 'DIN A4 portrait (201 x 297 cm)'
        },{
            fieldLabel: 'Amount',
            value: '50 sheets'
        },{
            fieldLabel: 'Product',
            value: 'Brochure'
        },{
            fieldLabel: 'Product',
            value: 'Brochure'
        },{
            fieldLabel: 'Product',
            value: 'Brochure'
        },{
            fieldLabel: 'ADDITIONAL OPTIONS',
            itemCls: 'form_row_header',
            labelSeparator: '',
            labelWidth: 200
        },{
            fieldLabel: 'Product',
            value: 'Brochure'
        },{
            fieldLabel: 'Format',
            value: 'DIN A4 portrait (201 x 297 cm)'
        },{
            fieldLabel: 'Amount',
            value: '50 sheets'
        }
    ]
});

Answer 1

我會為您的兩個標頭而不是fieldLabel使用xtype: 'label' 。 將字段更改為以下內容：

{
  xtype: 'label',
  text: 'BASE PRODUCT',
  cls: 'form_row_header'
} 

和

{
  xtype: 'label',
  text: 'ADDITIONAL OPTIONS',
  cls: 'form_row_header'
}

看下面的jsFiddle作為一個完整的例子：

http://jsfiddle.net/vMutF/