在和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

我会将xtype: 'label'用于您的两个标头，而不是fieldLabel。将字段更改为以下内容：

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

和

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

请查看以下jsFiddle以获取完整示例：

http://jsfiddle.net/vMutF/