Extjs：当窗口调整大小时，两个面板会相应调整大小

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

谢谢

我的代码如下：

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

如何修改上述代码，使其工作为我想要的

---

再次感谢

对于主容器，我建议使用hbox和/或vbox布局。这些布局就是你要找的。以下是一个示例：

var testPanel = new Ext.Viewport( {
    id : 'vp_test',
    layout : 'hbox',
    align : 'stretch',
    items : [
        {
            id : 'pnl_child_1',
            title : 'Test 1',
            flex : 2
        },
        {
            id : 'pnl_child_2',
            title : 'Test 2',
            flex : 3,
            layout : 'vbox',
            align : 'stretch',
            items : [
                {
                    id : 'pnl_child_3',
                    title : 'Test 3',
                    flex : 1
                },
                {
                    id : 'pnl_child_4',
                    title : 'Test 4',
                    flex : 1
                }
            ]
        },
    ]
} );

您可以参考文档

itemRts={
xtype:'面板'，
标题:"路线",，
//region:'north'，您可以为容器面板设置一个调整大小事件，并在调整大小时调用其子对象的“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();
            }
        }
    }]
});

您好，我在问题中附上了我的代码。我试图根据您的建议对其进行修改，但仍然无法切题。请您给我更多提示好吗？谢谢！首先，autoHeight不是您想要的。它通过计算子容器的大小来调整容器的大小，并且不允许您指定任何高度。而且边框布局根本不流畅。使用水平框和垂直框布局将为您提供最佳的流体布局。我将用您的代码更改我的示例。如果在面板上调用doLayout，我将以正确的方式完成此操作。为什么浏览器会显示“itemRts.doLayout不是一个函数”？请尝试使用“itemRts.doLayout（）”。如果itemRts是一个面板，则它必须工作。
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();
            }
        }
    }]
});