В форме и 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/