Problem with ExtJS vbox layout nested in a hbox layout_问答_开发者

I'm trying to get a layout to look like this :

Problem with ExtJS vbox layout nested in a hbox layout

_{(source: yfrog.com)}

I've had all sorts of fun trying to get this working. I finally got something that almost works, but only because I dropped in the 3.2 beta of Ext JS.

I'm left with one final problem. The code below will display the panels almost correctly, however, the right hand panel doesn't stretch to fill the right hand half of the container.

If I add a layout config (shown in the code commented out) and remove the layout attribute, then I end up with all three panels arranged vertically, rather than the two hbox panels being stretched to fill the space and the vbox panels being above one another.

I'd really appreciate someone passing an eye over the code below and pointing out what I'm missing or if I've encountered a bug in ExtJS 3.2b.

Thanks

Stephen

<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>
                    &开发者_JAVA百科lt;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>

So, after a lead from Jay Garcia I've fixed this in moments.

I needed to set my viewport to be of layout type "fit"

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

then I needed to add the layout attribute into the vbox and the hbox (previously I found that the layout attribute with the layoutConfig type attribute screwed things up, so removed them)

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

Those 2 changes gave me a beautiful layout, exactly the way I wanted it to display.

Thanks Jay (PS. go buy Jay's book "ExtJS in Action" ;) )

In extjs 3.4 there's a tablelayout: http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.layout.TableLayout