代码之家 › 专栏 › 技术社区 › Stephen Moretti

嵌套在hbox布局中的extjs vbox布局有问题

extjs layout javascript

Stephen Moretti · 技术社区 · 14 年前

我想让一个布局看起来像这样: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png

为了让这个工作顺利进行,我玩得很开心。我最终得到了一些几乎可以用的东西,但仅仅是因为我放弃了ExtJS的3.2测试版。

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

如果我添加一个布局配置(如代码注释中所示)并删除布局属性,那么我将以所有三个垂直排列的面板结束,而不是拉伸两个HBOX面板来填充空间,而Vbox面板则位于另一个之上。

我真的很感激有人仔细看一下下面的代码,指出我遗漏了什么,或者我在extjs 3.2b中遇到了一个bug。

谢谢

史蒂芬

<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>

2 回复 | 直到 10 年前

Stephen Moretti 14 年前

所以,在杰伊·加西亚的带领下,我很快就解决了这个问题。

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

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(请购买Jay的书“ExtJS In Action”;)

BMF 10 年前

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