CODEWITHSUNDEEP
extjspanelpaddingmargins
Microsoft DN
Microsoft DN

Reputation: 10020

How to give padding/margin to items inside the ExtJS panel

I am using ExtJS 2.3.0

I have a panel and some items inside that

{
    xtype: 'panel',
    border: false,
    margin: '10px;' // Not working for me
    items: [
            { boxLabel: 'One', xtype: 'checkbox' },
            { boxLabel: 'Two', xtype: 'checkbox' }
    ]
}

I tried using margin, padding... none of them is working for me..

Any solutions.

Upvotes: 6

Views: 43979

Answers (3)

kmihingo
kmihingo

Reputation: 384

Below should also work:

var myForm = new Ext.form.FormPanel ({
title: 'My Form',
width: 400,
height: 250,
padding: '50 10 10 10',

Upvotes: 1

Vinod Gubbala
Vinod Gubbala

Reputation: 754

In ExtJs 2.3, there is no support for config options "margin, padding" in Ext.Panel.

Check in the documentation http://docs.sencha.com/extjs/2.3.0/#!/api/Ext.Panel

you should go for bodyStyle config option.

{
     xtype: 'panel',
     border: false,
     bodyStyle: 'margin: 10px; padding: 5px 3px;',
     items: [
          { boxLabel: 'One', xtype: 'checkbox' },
          { boxLabel: 'Two', xtype: 'checkbox' }
     ]
}

Hope this helped you.....

Upvotes: 8

matt
matt

Reputation: 4047

You could use the bodyStyle configuration property:

{
    xtype: 'panel',
    border: false,
    bodyStyle: 'margin: 10px;'
    items: [
        { boxLabel: 'One', xtype: 'checkbox' },
        { boxLabel: 'Two', xtype: 'checkbox' }
    ]
}

Upvotes: 13

Related Questions