Extjs:两个面板在窗口调整大小时相应地调整大小

Question

我有一个包含两个子面板的面板。父面板使用“边框”布局，而两个子面板分别使用“窗体”和“列”布局。现在如何使这两个子面板在窗口调整大小时相应地调整大小，即确保这两个面板的大小比例恒定。

谢谢!

我的代码如下:

itemRts = {
    xtype: 'panel',
    title: 'Route',
    region: 'north',
    autoHeight: true,
    layout: 'form',
    width: 294,
    bodyStyle: 'padding:10px 12px 10px',
    id: 'ROUTE_PANEL',
    el: 'Route_Setup',
    items: [
    {
        xtype: 'button',
        text: 'Go',
        anchor: '0',
        id: 'GO_BTN'

    }]
};

itemEvts = {
    xtype: 'panel',
    title: 'Events',
    region: 'center',
    layout: 'column',
    tpl: 'Please put events here.',
    //bodyStyle: 'padding:10px 12px 10px',
    border: false,
    hideBorders: true,
    id: 'EVENT_PANEL',
    el: 'Event_Legend',
    autoScroll: true
};

newView = new Ext.Viewport({
    layout: "border",
    items: [

    {
        xtype: 'panel',
        margins: '10 0 10 10',
        region: 'center',
        width: 200,
        layout: 'border',
        split: true,
        boxMaxWidth: 280,
        minWidth: 280,
        id: 'RTS_EVTS_REGION',
        collapseMode: 'mini',
        items: [
        itemRts,
        itemEvts]
    }]
});

如何修改上面的代码以使其按我想要的方式工作？

再次感谢!

Answer 1

您可以为容器面板设置调整大小事件，并在调整大小的情况下调用其子项的“dolayout”方法:

newView = new Ext.Viewport({
    layout: "border",
    items: [

    {
        xtype: 'panel',
        margins: '10 0 10 10',
        region: 'center',
        width: 200,
        layout: 'border',
        split: true,
        boxMaxWidth: 280,
        minWidth: 280,
        id: 'RTS_EVTS_REGION',
        collapseMode: 'mini',
        items: [itemRts, itemEvts],
        listeners: {
            'resize': function () {
                itemRts.doLayout();
                itemEvts.doLayout();
            }
        }
    }]
});