Question

我正在尝试将布局看起来像这样： hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png

我试图让这个工作变得有各种各样的乐趣。我终于得到了几乎可以工作的东西，但这只是因为我在Ext JS的3.2 beta中掉线了。

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

如果我添加一个布局配置（显示在代码中注释掉）并删除布局属性，那么我最终将所有三个面板垂直排列，而不是两个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>

Answer 1

所以，在Jay Garcia的带领下，我已经解决了这个问题。

我需要将视口设置为布局类型“fit”

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

然后我需要将layout属性添加到vbox和hbox中（之前我发现layoutConfig类型属性的layout属性搞砸了，所以删除了它们）

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

这两个变化给了我一个漂亮的布局，正是我希望它展示的方式。

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

Answer 2

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

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

2 个答案: