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

您可以为容器面板设置resize事件，并在调整大小时调用其子项的“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();
            }
        }
    }]
});

Answer 2

对于您的主容器，我建议使用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
                }
            ]
        },
    ]
} );

您可以参考文档，viewport，hbox，vbox

   itemRts = {
        xtype: 'panel',
        title: 'Route',
        // region: 'north', <<< we don't need this anymore
        flex: 1, // this means that this container has 1 flexible share
        // autoHeight: true, <<< this will ruin all layout
        layout: 'form',
        // width: 294, <<< we don't need this anymore
        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', <<< we don't need this anymore
        flex: 1, // this means that this container has 1 flexible share
        layout: 'column',
        tpl: 'Please put events here.', // <<<< if you're not going to use xTemplates you should use html property instead
        //bodyStyle: 'padding:10px 12px 10px',
        border: false,
        hideBorders: true,
        id: 'EVENT_PANEL',
        el : 'Event_Legend',
        autoScroll: true
    };

newView = new Ext.Viewport({
//// if you have only one child component you can use fit layout for viewport. 
//// and consider removing that only child. use viewport as main container.
    layout : "border", 
    items: [ 
        {
            xtype: 'panel',
            margins: '10 0 10 10',
            region: 'center',
            // width: 200, <<<< width has no effect on center region
      /// we'll use hbox with align stretch
            layout: 'hbox',
            align: 'stretch',
            // split: true, <<<< split has no effect on center region
            // boxMaxWidth: 280, <<<< no effect
            // minWidth: 280, <<<< no effect
            id: 'RTS_EVTS_REGION',
            // collapseMode: 'mini', <<<< collapse properties has no effect on center region
            items: [
                itemRts,
                itemEvts
            ]
        }
    ]
});

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

2 个答案: