ExtJS: How to extend an Ext.Panel with a BorderLayout?

Question

Hi, I am trying to display a panel with a BorderLayout. The panel being displayed is an instance of an Ext.Panel subclass. I had the panel displaying perfectly before attempting to add the layout, but with the layout added it doesn't show at all, without throwing any errors or giving any useful feedback whatsoever. Using exactly the same attributes, but not subclassing, the panel also works fine. To demonstrate, with code directly from the ExtJS BorderLayout API, this works:

var win = new Ext.Panel({
    renderTo: document.body,
    width: 700,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        height: 100,
        split: true,         // enable resizing
        minSize: 75,         // defaults to 50
        maxSize: 150,
        margins: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        margins: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        cmargins: '5 5 0 5', // adjust top margin when collapsed
        id: 'west-region-container',
        layout: 'fit',
        unstyled: true
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'container',
        layout: 'fit',
        margins: '5 5 0 0'
    }]
});

and this does not:

BasePanel = Ext.extend(Ext.Panel, {
    renderTo: document.body,
    width: 700,
    height: 500,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'South Region is resizable',
        region: 'south',     // position for region
        height: 100,
        split: true,         // enable resizing
        minSize: 75,         // defaults to 50
        maxSize: 150,
        margins: '0 5 5 5'
    },{
        // xtype: 'panel' implied by default
        title: 'West Region is collapsible',
        region:'west',
        margins: '5 0 0 5',
        width: 200,
        collapsible: true,   // make collapsible
        cmargins: '5 5 0 5', // adjust top margin when collapsed
        id: 'west-region-container',
        layout: 'fit',
        unstyled: true
    },{
        title: 'Center Region',
        region: 'center',     // center region is required, no width/height specified
        xtype: 'container',
        layout: 'fit',
        margins: '5 5 0 0'
    }]
});

var win = new BasePanel();

Am I missing something obvious here? Thanks for any help.

Answer 1

You need to create the actual control, then extend it:

    var BasePanel = function (config) {

        Ext.apply(config,{items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            height: 100,
            split: true,         // enable resizing
            minSize: 75,         // defaults to 50
            maxSize: 150,
            margins: '0 5 5 5'
        }, {
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region: 'west',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            cmargins: '5 5 0 5', // adjust top margin when collapsed
            id: 'west-region-container',
            layout: 'fit',
            unstyled: true
        }, {
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'container',
            layout: 'fit',
            margins: '5 5 0 0'
        }]});
        //call the base constructor
        BasePanel.superclass.constructor.call(this, config);
    }

    Ext.extend(BasePanel, Ext.Panel, {
        width: 700,
        height: 500,
        title: 'Border Layout',
        layout: 'border',

    });
    var win = new BasePanel({renderTo:document.body});