You found a bug! We've classified it as EXTJS-7113 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    10
    Vote Rating
    0
    TBakker is on a distinguished road

      0  

    Default Ext.panel.Panel collapsible & padding

    Ext.panel.Panel collapsible & padding


    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:
    HTML Code:
    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

  2. #2
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    friend has a spectacular aura about friend has a spectacular aura about

      1  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team Phil Guerrant's Avatar
    Join Date
    May 2011
    Location
    Colorado
    Posts
    287
    Vote Rating
    78
    Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice Phil Guerrant is just really nice

      1  

    Default


    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:

    Code:
    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.
    Phil Guerrant
    Ext JS - Development Team

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    10
    Vote Rating
    0
    TBakker is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2

Tags for this Thread