动态处理布局 [英] Handling the layout dynamically

问题描述

下面是我尝试的代码:

<script type="text/javascript">
    Ext.require(['*']);
    Ext.onReady(function() {
        Ext.Loader.setConfig({
            enabled: true
        });
        var totalScreenWidth = screen.availWidth;
        var totalScreenHeight = screen.availHeight;
        Ext.QuickTips.init();

        var viewport = Ext.create('Ext.ViewPort', {
            id: 'border-example',
            layout: 'border',
            items: [
            Ext.create('Ext.Component', {
                region: 'north',
                height: totalScreenHeight * 0.05,
                autoEl: {
                    tag: 'div',
                    html: '<p><center>UI Demo</center></p>'
                }
            }), {
                region: 'west',
                stateId: 'navigation-panel',
                id: 'west-panel',
                title: 'Tree View',
                split: true,
                width: totalScreenWidth * 0.2,
                collapsible: true,
                animCollapse: true,
                xtype: 'tabpanel',
                dockedItems: [{
                    dock: 'top',
                    xtype: 'toolbar'
                }],
                minSize: 175,
                maxSize: 400,
                margin: '0 5 0 0',
                activeTab: 1,
                tabPosition: 'bottom',
                items: [{
                    title: 'Tree View',
                    autoScroll: true
                }, {
                    title: 'Graphical View',
                    autoScroll: true
                }]

            },
            Ext.widget('tabpanel', {
                id: 'tabWidgetPanel',
                region: 'center',
                items: [{
                    contentEl: 'Tabs1',
                    title: 'Tab1',
                }, {
                    contentEl: 'Tabs2',
                    title: 'Tab2',
                }]
            })]
        });

        ext.get("hideit").on('click', function() {
            var w = Ext.getCmp('west-panel');
            w: collapsed ? w.expand() : w.collapse();
        });

    });
</script>

当最小化西方导航面板时，tabWidgetPanel也会向左移动，而在空白屏幕的右侧.

When the west navigation panel is minimised, then the tabWidgetPanel is also moving towards left leaving the right side of the empty screen.

我想要的是当西方导航面板合拢时，我希望tabWidgetPanel增大尺寸并占据整个屏幕.

What I want is when the west navigation panel is collapsed, I want the tabWidgetPanel to increase in size and occupy the entire screen.

推荐答案

从其中删除renderTo，添加区域:"center"，删除高度并删除宽度.定义此区域时无法调整.您还在写reion:"west".

Remove the renderTo from it, add region: 'center', remove height and remove width. The Region can't adjust when you define this. You are also writing reion: 'west'.

这篇关于动态处理布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！