CODEWITHSUNDEEP
javascriptformsextjs
Edward Tanguay
Edward Tanguay

Reputation: 193302

In and Ext JS form, how can I make some field widths wider than others?

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:

enter image description here

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

enter image description here

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'
        }
    ]
});

Upvotes: 2

Views: 189

Answers (1)

McStretch
McStretch

Reputation: 20645

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/

Upvotes: 1

Related Questions