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

Question

In an Ext JS form, I can define the labelWidth in the form itself.

But in this case, I want some labels (the headers) to have a wider width.

However, even if I define them explicitly , they remain just as wide as the others:

I can of course change all of them to a wider width, but that is also undesirable :

How can I define all fields to be 100 width yet the header fields to be 200?

here is the current code:

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

I would use xtype: 'label' for your two headers rather than fieldLabel . Change the fields to the following:

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

and

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

Take a look at the following jsFiddle for a complete example:

http://jsfiddle.net/vMutF/