Question

我正在尝试显示一个带有BorderLayout的面板。显示的面板是Ext.Panel子类的实例。在尝试添加布局之前，我让面板显示完美，但添加的布局根本没有显示，没有抛出任何错误或提供任何有用的反馈。使用完全相同的属性，但不使用子类，面板也可以正常工作。要使用直接来自ExtJS BorderLayout API的代码进行演示，可以使用：

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

我错过了一些明显的东西吗？谢谢你的帮助。

Answer 1

您需要创建实际控件，然后对其进行扩展：

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

ExtJS：如何使用BorderLayout扩展Ext.Panel？

1 个答案: