Ext.panel.Panel collapsible & padding

[TBakker]

Hi ExtJS users,

I'm kind of new with ExtJS (working 4 full weeks with it) and I have a problem which I couldn't find in the docs.

I have a panel like this:

Ext.define('BaseClass.MenuGroup', {
  extend: 'Ext.panel.Panel',
  alias: 'widget.menugroup',
  collapsible: true,
  layout: 'anchor',
  padding: '5'
});

When I collapse the panel, the header changes it CSS "top" property on from 5px to 0px.
Where can I define this css property? I don't want to mess with ext-all.css

Thank you

[friend]

I'm not encountering this behavior. Can you please post a functional code sample?

[Phil Guerrant]

Moving this to our bugs forum since it is an inconsistency in the way padding is handled on the panel element. Here is a working test case:

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        title: 'foo',
        html: 'bar',
        collapsible: true,
        padding: 5,
        renderTo: document.body
    });
});

The use of padding on the main panel element is interesting since all the visible panel elements show inside the padding, including the header and body. If your intention is to add space around the panel, I'd recommend using margin instead of padding. If you want space inside the panel body use the bodyPadding config.

[TBakker]

Thanks for your replies.

@friend: JSFiddle is not letting me create a working example.

@Phil: Yes, I want spacing around the panel. The solution was indeed replacing padding to margin.
Even though my problem is solved, I still find this behaviour weird.