Removing whitespace in ExtJS 4 accordion panel, fit contents to width/height

Question

I have been tasked with moving existing ExtJS 4 Panels on a page, rendered to separate divs, into an Accordion layout; I have moved the divs into the Accordion as items, and the Panels are being rendered well enough.

In my particular situation, however, the Accordion Panel applies some (10px all round) padding that I would like to remove.

I have a suspicion that it might be to do with some preexisting table styling that I unfortunately can't remove. What stylesheet modifications should I be making to specifically target the accordion control and its contents, such that the Panels contained within the Accordion Panels fit against all four edges?

If it might not be CSS styling, or if it can be as easy as an Accordion config/property, what should I be setting to remove this whitespace? I have tried some of the settings that looked promising, but have not fixed the issue.

Or, in the more negative circumstances, do I have to move the Panels directly into the Accordion, which brings with it yet more problems?

Essentially, how do I make the contents of each Panel in an ExtJS Accordion Layout fit the width and height of their individual Accordion Panel exactly without whitespace?

Accordion panel ExtJS code:

var accordion = Ext.create('Ext.panel.Panel',{
    bodyPadding: '0px',
    width: '370px',
    autoHeight: 'false',
    layout: 'accordion',
    items: [
        {title: 'Drawing', html: '<div id="Image" style="padding: 0px, margin: 0px; border-spacing: 0px; height: 350px"></div>'},
        {title: 'Production Processes', html: '<div id="Process" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'},
        {title: 'Production Item Details', html: '<div id="Details" style="padding: 0px, margin: 0px; border-spacing: 0px"></div>'}
    ],
    renderTo: Ext.get('Accordion')
});

Sorry, but I don't yet understand JSFiddle and getting it to work. Not promising as a developer... I've worked around the issue by setting each container panel to have a collapse/expand button; given that my brief has been clarified such that multiple panels may have to be shown at once, it is a better fit for my situation anyway. I'll post my solution as an answer when I can. — David Smithson

David Smithson David Smithson · Accepted Answer · 2014-02-24T12:28:16

My workaround has been to take the pre-existing panels and apply collapse control variables:

var drawingPanel = Ext.create('Ext.panel.Panel', {
    animCollapse: false,
    collapsible: true,
    autoWidth: true,
    titleCollapse: true,
    collapseFirst: false,
    collapsed: true,
    ...

This starts the panel as collapsed, and collapse/expand/beforerender listeners to set/get cookies that control a persisted state:

    ...
    listeners:{
        expand: function(){
            var now = new Date();
            var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
            Ext.util.Cookies.set('panelCollapsed', 'false', exp);
        },
        collapse: function(){
            var now = new Date();
            var exp = new Date(now.getTime() + 2592000000); //number of milliseconds equal to 30 days from now
            Ext.util.Cookies.set('panelCollapsed', 'true', exp);
        },
        beforerender: function (){
            var cookieSet = Ext.util.Cookies.get('panelCollapsed');
            if(cookieSet == 'true')
            {
                Ext.apply(Ext.getCmp('panel'), { collapsed: true });
            }
            else
            {
                Ext.apply(Ext.getCmp('panel'), { collapsed: false });
            }
        }
    }
});

Other attributes of the panel have been stripped out to demonstrate the salient points.

This implementation does consider a panel on its own; the expand and collapse listeners could feasibly control the collapsed state of other panels as necessary. Admittedly, this probably isn't as efficient as getting the accordion control to work properly, but if they don't work as expected, this is a start.

Removing whitespace in ExtJS 4 accordion panel, fit contents to width/height

1 Answers