I'm trying to reduce the padding between the fields of my ExtJS form.

I am able to change the style of the field data with the style tag in the Items collection like this:

//form right
var simple_form_right = new Ext.FormPanel({
    frame:true,
    labelWidth: 90,
    labelAlign: 'right',
    title: 'Orderer Information',
    bodyStyle:'padding:5px 5px 0 0',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    items: [{
            fieldLabel: 'Customer Type',
            name: 'customerType',
            style: 'padding:0px;font-size:7pt',
            labelStyle: 'padding:0px',
            allowBlank: false,
            value: 'Company'
        },{
            fieldLabel: 'Company',
            name: 'pany',
            value: 'The Ordering Company Inc.'
        },{
            fieldLabel: 'Last Name',
            name: 'lastName',
            value: 'Smith'
        }, {
        ...

But how do I access the style of the label as well, something like styleLabel or labelStyle, etc.?

I'm trying to reduce the padding between the fields of my ExtJS form.

I am able to change the style of the field data with the style tag in the Items collection like this:

//form right
var simple_form_right = new Ext.FormPanel({
    frame:true,
    labelWidth: 90,
    labelAlign: 'right',
    title: 'Orderer Information',
    bodyStyle:'padding:5px 5px 0 0',
    width: 300,
    height: 600,
    autoScroll: true,
    itemCls: 'form_row',
    defaultType: 'displayfield',
    items: [{
            fieldLabel: 'Customer Type',
            name: 'customerType',
            style: 'padding:0px;font-size:7pt',
            labelStyle: 'padding:0px',
            allowBlank: false,
            value: 'Company'
        },{
            fieldLabel: 'Company',
            name: 'pany',
            value: 'The Ordering Company Inc.'
        },{
            fieldLabel: 'Last Name',
            name: 'lastName',
            value: 'Smith'
        }, {
        ...

But how do I access the style of the label as well, something like styleLabel or labelStyle, etc.?

• javascript
• css
• forms
• extjs

Share Improve this question Follow edited Apr 27, 2011 at 11:18 Edward Tanguay asked Apr 27, 2011 at 10:23 Edward TanguayEdward Tanguay 193k320320 gold badges725725 silver badges1.1k1.1k bronze badges 1

• Oh please... don't post code samples as images. – Rene Saarsoo Commented Apr 27, 2011 at 11:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

There's labelPad which defaults to 5px apparently, and labelStyle if you need more than that.

You can make use of the labelStyle property available for form fields. Here is an example:

items: [{
   fieldLabel: 'Company',
   name: 'pany',
   labelStyle: 'padding: 10px 10px;'
}]