ext_js3.0 布局问题，请教

JScript code
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>08.layout</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
        <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../../ext-all.js"></script>
        <script type="text/javascript" src="localXHR.js"></script>
        <script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function(){    // 表格配置开始
    var cm = new Ext.grid.ColumnModel([
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);    var data = [
        ['1','name1','descn1'],
        ['2','name2','descn2'],
        ['3','name3','descn3'],
        ['4','name4','descn4'],
        ['5','name5','descn5']
    ];    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load();    var grid = new Ext.grid.GridPanel({
        ds: ds,
        cm: cm,
        title: 'center-north',
        region: 'north'
    });
     var form2 = new Ext.form.FormPanel({
        defaultType: 'textfield',
        labelAlign: 'right',
        title: 'form',
        labelWidth: 50,
        frame:true,
        width: 220,        title: 'center-north-form',
        region: 'north',        items: [{
            fieldLabel: '文本框',
            anchor: '90%'
        }],
        buttons: [{
            text: '按钮'
        }]
    });
    // 表格配置结束    // 树形配置开始
    var tree = new Ext.tree.TreePanel({
        loader: new Ext.tree.TreeLoader({dataUrl: '10-05.tree.txt'}),
        title: 'west',
        region: 'west',
        split: true,
        border: true,
        collapsible: true,
        width: 120,
        minSize: 80,
        maxSize: 200
    });    var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});
    tree.setRootNode(root);
    root.expand();
    // 树形配置结束    // 表单配置开始
    var form = new Ext.form.FormPanel({
        defaultType: 'textfield',
        labelAlign: 'right',
        title: 'form',
        labelWidth: 50,
        frame:true,
        width: 220,        title: 'center-center',
        region: 'center',        items: [{
            fieldLabel: '文本框',
            anchor: '90%'
        }],
        buttons: [{
            text: '按钮'
        }]
    });
    // 表单配置结束    // 布局开始
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[{
            region: 'north',
            contentEl: 'north-div',
            height: 80,
            bodyStyle: 'background-color:#BBCCEE;'
        },{
            region: 'south',
            contentEl: 'south-div',
            height: 20,
            bodyStyle: 'background-color:#BBCCEE;'
        },tree,{
            region: 'center',
            split: true,
            border: true,
            layout: 'border',
            items: [{
                    region:'north',
                    width:200,
                    layout:'accordion',
                    layoutConfig: {
                        titleCollapse:true,
                        animate:true,
                        activeOnTop:false    
                    }
                    items:[{
                        title:'Menu',
                        html:'menu'    
                    }]
                },form]
        }]
    });
    // 布局结束});
        </script>
    </head>
    <body>
        <script type="text/javascript" src="../shared/examples.js"></script>
        <div id="north-div">标题栏：viewport加panel实现复杂布局</div>
        <div id="south-div">状态栏：Copyright by www.family168.com</div>
    </body>
</html>
上边那个是想着在右边展示一个form和伸缩菜单，一上一下都靠右，但是效果出不来。

解决方案 »

  1.   


    ///右边不是用region: 'center'的吗
      

  2.   

    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gbk">
            <title>08.layout</title>
            <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
            <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
            <script type="text/javascript" src="../../ext-all.js"></script>
            <script type="text/javascript" src="localXHR.js"></script>
            <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
    Ext.onReady(function(){    // 表格配置开始
        var cm = new Ext.grid.ColumnModel([
            {header:'编号',dataIndex:'id'},
            {header:'名称',dataIndex:'name'},
            {header:'描述',dataIndex:'descn'}
        ]);    var data = [
            ['1','name1','descn1'],
            ['2','name2','descn2'],
            ['3','name3','descn3'],
            ['4','name4','descn4'],
            ['5','name5','descn5']
        ];    var ds = new Ext.data.Store({
            proxy: new Ext.data.MemoryProxy(data),
            reader: new Ext.data.ArrayReader({}, [
                {name: 'id'},
                {name: 'name'},
                {name: 'descn'}
            ])
        });
        ds.load();    var grid = new Ext.grid.GridPanel({
            ds: ds,
            cm: cm,
            title: 'center-north',
            region: 'north'
        });
         var form2 = new Ext.form.FormPanel({
            defaultType: 'textfield',
            labelAlign: 'right',
            title: 'form',
            labelWidth: 50,
            frame:true,
            width: 220,        title: 'center-north-form',
            region: 'north',        items: [{
                fieldLabel: '文本框',
                anchor: '90%'
            }],
            buttons: [{
                text: '按钮'
            }]
        });
        // 表格配置结束    // 树形配置开始
        var tree = new Ext.tree.TreePanel({
            loader: new Ext.tree.TreeLoader({dataUrl: '10-05.tree.txt'}),
            title: 'west',
            region: 'center',
            split: true,
            border: true,
            collapsible: true,
            width: 120,
            minSize: 80,
            maxSize: 200
        });    var root = new Ext.tree.AsyncTreeNode({text:'偶是根'});
        tree.setRootNode(root);
        root.expand();
        // 树形配置结束    // 表单配置开始
        var form = new Ext.form.FormPanel({
            defaultType: 'textfield',
            labelAlign: 'right',
            title: 'form',
            labelWidth: 50,
            frame:true,
            width: 220,        title: 'center-center',
            region: 'east',        items: [{
                fieldLabel: '文本框',
                anchor: '90%'
            }],
            buttons: [{
                text: '按钮'
            }]
        });
        // 表单配置结束    // 布局开始
        var viewport = new Ext.Viewport({
            layout:'border',
            items:[{
                region: 'north',
                contentEl: 'north-div',
                height: 80,
                bodyStyle: 'background-color:#BBCCEE;'
            },{
                region: 'south',
                contentEl: 'south-div',
                height: 20,
                bodyStyle: 'background-color:#BBCCEE;'
            },tree,{
                region: 'east',
                split: true,
                border: true,
                layout: 'border',
                items: [{
                 region:'north',
                 width:200,
                 layout:'accordion',
                 layoutConfig: {
                 titleCollapse:true,
                 animate:true,
                 activeOnTop:false
                 },
                 items:[{
                 title:'Menu',
                 html:'menu'
                 }]
                 },form]
            }]
        });
        // 布局结束});
            </script>
        </head>
        <body>
            <script type="text/javascript" src="../shared/examples.js"></script>
            <div id="north-div">标题栏：viewport加panel实现复杂布局</div>
            <div id="south-div">状态栏：Copyright by www.family168.com</div>
        </body>
    </html>
    这样试了试，还是不行。谢谢你的回复！
      

  3.   

    如果你用border布局 必须得有region: 'center',
      

  4.   

    tree,{
                region: 'east',
                split: true,
                border: true,
                layout: 'border',
                items: [{
                        region:'north',
                        width:200,
                        layout:'accordion',
                        layoutConfig: {
                            titleCollapse:true,
                            animate:true,
                            activeOnTop:false    
                        },
                        items:[{
                            title:'Menu',
                            html:'menu'    
                        }]
                    },form]
    不太明白center应该加在什么地方，是把上边的region:'east'改为center，还是修改form的region? 请赐教。谢谢你的回复！
      

  5.   

    右边布局是：上边为一个form，下边为一个伸缩菜单。一直搞不定。