嵌套在 hbox 布局中的 ExtJS vbox 布局问题答案

【问题标题】：Problem with ExtJS vbox layout nested in a hbox layout嵌套在 hbox 布局中的 ExtJS vbox 布局问题
【发布时间】：2011-01-29 13:50:52
【问题描述】：

我正在尝试使布局看起来像这样：
_{（来源：yfrog.com）}

我在尝试让它发挥作用时获得了各种各样的乐趣。我终于得到了几乎可以工作的东西，但这只是因为我放弃了 Ext JS 的 3.2 测试版。

我还有最后一个问题。下面的代码将几乎正确地显示面板，但是右侧面板不会拉伸以填充容器的右半部分。

如果我添加一个布局配置（显示在注释掉的代码中）并删除布局属性，那么我最终将所有三个面板垂直排列，而不是两个 hbox 面板被拉伸以填充空间和 vbox 面板高高在上。

非常感谢有人仔细查看下面的代码并指出我遗漏的内容或者我是否在 ExtJS 3.2b 中遇到了错误。

谢谢

斯蒂芬

<html>
    <head>
        <script src="/script/ext/adapter/ext/ext-base-debug.js"></script>
        <script src="/script/ext/ext-all-debug.js"></script>
        <script type="text/javascript">
        Ext.BLANK_IMAGE_URL = '/script/ext/resources/images/default/s.gif';
        </script>

        <script type="text/javascript">
        Ext.onReady(function() {
            var detailPanel = {
                id : 'detail-panel',
                contentEl : 'pageDetail',
                title : 'Detail Panel'
            };

            var workflowPanel = {
                id : 'workflowpanel',
                title : 'Page Status',
                contentEl : 'pageWorkflow'
            };

            var accessPanel = {
                id : 'accesspanel',
                title : 'Page Access',
                contentEl: 'pageAccess'
            };

            var extraPanel = {
                title : 'extra panel',
                layoutConfig : {
                    type : 'vbox',
                    align : 'stretch',
                    pack : 'start'
                },
                defaults : {
                    flex : 1,
                    frame : true
                },
                items : [workflowPanel,accessPanel]
            };

            var overviewPanel = {
                layout : 'hbox',
/*              layoutConfig : {
                    type :'hbox',
                    align : 'stretch',
                    pack : 'start'
                },
*/              
                defaults :{
                    frame : true,
                    flex : 1
                },
                items : [detailPanel,extraPanel]
            };


            vp = new Ext.Viewport({
                items : [overviewPanel] ,
                renderTo : Ext.getBody()
            });

        });
        </script>

        <link rel="stylesheet" type="text/css" href="/script/ext/resources/css/ext-all.css" />
    </head>
    <body>
        <div id="overview" class="x-hidden">
            <div id="pageDetail">
                <dl>
                    <dt>Page URL</dt>
                    <dd>/contact/</dd>
                    <dt>Navigation Title</dt>
                    <dd>Get in touch...</dd>
                </dl>
                <dl>
                        <dt>Associate project to types</dt>
                        <dd>&nbsp;</dd>

                        <dt>Associate projects related to other projects</dt>
                        <dd>&nbsp;</dd>
                </dl>
            </div>
            <div id="pageExtra">
                <div id="pageWorkflow">
                    <em>Current Status</em><br>
                        Live on 08/03/2010 23:23 by username
                    <br/>
                    <em>Workflow</em><br>
                    Some status text
                    <dl>
                        <dt>Last Updated</dt>
                        <dd>07/03/2010 10:10</dd>
                        <dt>Updated by</dt>
                        <dd>username*</dd>
                    </dl>
                    <br/>
                </div>
                <div id="pageAccess">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae neque risus, non elementum arcu. Donec et convallis ipsum. Vivamus nec viverra nunc.                  
                </div>
            </div>
        </div>      
    </body>
</html>

【问题讨论】：

标签： javascript layout extjs

【解决方案1】：

所以，在 Jay Garcia 的带领下，我很快就解决了这个问题。

我需要将我的视口设置为“适合”布局类型

vp = new Ext.Viewport({
    layout : 'fit',
    items : [overviewPanel] ,
    renderTo : Ext.getBody()
});

然后我需要将layout属性添加到vbox和hbox中（之前我发现layout属性和layoutConfig type属性搞砸了，所以把它们去掉了）

            var extraPanel = {
                title : 'extra panel',
                layout : 'vbox',
                layoutConfig : {
                    type : 'vbox',
                    align : 'stretch',
                    pack : 'start'
                },
                defaults : {
                    flex : 1,
                    frame : true
                },
                items : [workflowPanel,accessPanel]
            };

            var overviewPanel = {
                layout : 'hbox',
                layoutConfig : {
                    type :'hbox',
                    align : 'stretch',
                    pack : 'start'
                },
                defaults :{
                    frame : true,
                    flex : 1
                },
                items : [detailPanel,extraPanel]
            };

这 2 处更改给了我一个漂亮的布局，正是我希望它显示的方式。

感谢 Jay（PS。去买 Jay 的书“ExtJS in Action”；））

【讨论】：

您的 layoutConfig 完全修复了我的布局运行失败。谢谢:)

【解决方案2】：

在 extjs 3.4 中有一个表格布局： http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.layout.TableLayout

【讨论】：

如果您对其进行任何编辑，我错误地对此投了反对票，我很乐意收回我的反对票。