ExtJS: Как расширить Ext.Panel с BorderLayout? - PullRequest
Новая
       5

ExtJS: Как расширить Ext.Panel с BorderLayout?

3 голосов
/ 29 июля 2010

Я пытаюсь отобразить панель с BorderLayout.Отображаемая панель является экземпляром подкласса Ext.Panel.Перед тем, как добавить макет, панель отлично отображалась, но с добавленным макетом она не отображается вообще, без каких-либо ошибок или каких-либо полезных отзывов.Используя точно такие же атрибуты, но не подклассы, панель также работает нормально.Чтобы продемонстрировать, с помощью кода непосредственно из API ExtJS BorderLayout это работает: 

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'
    }]
});

, а это не так: 

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();

Я что-то упускаю здесь очевидное?Спасибо за любую помощь.

1 Ответ

2 голосов
/ 29 июля 2010

Вам необходимо создать фактический элемент управления, а затем расширить его: 

    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});
...