Extjs实现如图的布局-table布局下filedlable不显示

哪位EXT大神帮忙实现下如下图这种布局：
我尝试用table布局，使用两列显示，但会导致文本框的filedlable不显示。
我尝试布局的效果如下：这种效果的代码如下：Ext.onReady(function(){
    Ext.QuickTips.init();

   //Toolbar
var toolbar = new Ext.Toolbar({
region: 'north',
height:30,
width:"100%",
items:[{
text: '保存',
            iconCls : 'save'
},{
text : '取消',
iconCls : 'clear'
}]
});

    //Form panel
    var form = new Ext.FormPanel({
     region: 'center',
     layout:'table',
        layoutConfig: {columns:2},
        labelWidth: 75,
        labelAlign: 'right',
        frame:true,
        width:500,
        autoHeight:true,
        defaults: {width: 230, msgTarget:'side'},
        defaultType: 'textfield',
        items: [
        {
         name:'fullnameZh',
         ref:'fullnameZh',
            fieldLabel: 'LP名称(中文)',
            allowBlank:false,
            blankText:'LP名称(中文)必须输入.'
        },{
         name:'fullnameEn',
         ref:'fullnameEn',
            fieldLabel: 'LP名称(英文)'
        },{
         name:'shortnameZh',
         ref:'shortnameZh',
            fieldLabel: 'LP简称(中文)'
        },{
         name:'shortnameEn',
         ref:'shortnameEn',
            fieldLabel: 'LP简称(英文)'
        },{
         name:'lpType',
         ref:'lpType',
            fieldLabel: 'LP类型'
        },{
         name:'assort',
         ref:'fullnameEn',
            fieldLabel: 'LP种类'
        },{
         name:'currency',
         ref:'currency',
            fieldLabel: 'LP投资币种'
        },{
         name:'website',
         ref:'website',
            fieldLabel: 'LP网址'
        },{
            name:'id',
            ref:'id',
            hidden:true
        }]
});

    var catalog = new Ext.BoxComponent({
        region: 'west',
        height: 600,
        width:300,
        autoEl: {
            tag: 'div',
            html:'<p>目录标签区域</p>'
        }
    });

    /***Layout******************************************************************/
var layout = new Ext.Viewport({
        layout: 'border',
        items: [toolbar,catalog,form]
    });
layout.render('container');
});extjs布局table布局filedlable不显示

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

Viewport不是指定render到body的么，还有如果你先试用了border布局，然后在center里使用了table布局，我猜是不是左边的宽度过大了，导致center的布局不够了，然后导致 table布局里的宽度不够，所以fieldLabel显示不出来了。当然如果位置够的情况下不排除是Extjs的BUG。
建议使用布局使用3列 HBOX，然后第一列你按照你的做，后两列使用 VBOX
box布局比较容易控制宽度，以及高度（以及自适应）
1.可以不使用Viewport
2.toolbar 应该属于formpanel,可以是ttbar或者现在建议的是dockedItems:{dock: 'top'}
3.table使用rowspan /colspan布局,columns使用columnWidth布局
4,你应该使用vbox/hbox嵌套
to all:
你们能够给出合适的代码吗？to yibey:
现在页面上Viewport是输出到一个层里边的。层定义如下：<body>
<div id="container" style="width: 100%;height: 100%;"></div>
</body>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript">
Ext.onReady(function(){
   var p=Ext.create('Ext.panel.Panel',{
     renderTo:Ext.getBody()
     ,layout:{type:'hbox',align:'stretch'}
     ,items:[{xtype:'box'
      ,flex:1
      ,autoEl:{tag:'div',html:'<p>目录标签区域</p>'}
     }
     ,{xtype:'container'
      ,flex:1
      ,layout:'vbox'
      ,items:[{xtype:'label',text:'label1'}
        ,{xtype:'label',text:'label2'}
      ]}
     ,{xtype:'container'
      ,flex:1
      ,layout:'vbox'
      ,items:[{xtype:'label',text:'label1'}
        ,{xtype:'label',text:'label2'}
        ,{xtype:'label',text:'label3'}
        ,{xtype:'label',text:'label4'}
      ]}
     ]
   });
});
    </script>
    </head>
    <body>
      </body>
</html>
在Extjs 3.2.0下无法显示，请问你是使用的什么版本？
我最后是这样做的，也实现了预想的效果，没有使用vbox/hbox嵌套，但我想如果使用vbox/hbox嵌套也许会使得代码更加简洁，代码如下:Ext.onReady(function(){
//Toolbar
var toolbar = new Ext.Toolbar({
region: 'north',
height:30,
width:"100%",
items:[{
text: '保存',
            iconCls : 'save'
},{
text : '取消',
iconCls : 'clear'
}]
});

//Form panel
var form = new Ext.FormPanel({
     region: 'center',
        frame:true,
        layout:'table',
        layoutConfig: {columns:2},
        defaults: {msgTarget:'side'},
        labelAlign: 'right',
        labelWidth: 110,
         items:[
        {
                layout:'form',
                defaultType: 'textfield',
                defaults: {width: 230},
                items: [
             {
                     name:'fullnameZh',
                     id:'fullnameZh',
                        fieldLabel: 'LP名称(中文)',
                        allowBlank:false,
                        blankText:'LP名称(中文)必须输入.'
                    },
                    {
                     name:'shortnameZh',
                     id:'shortnameZh',
                        fieldLabel: 'LP简称(中文)'
                    }
                ]
             },
             {
                layout:'form',
                defaultType: 'textfield',
                defaults: {width: 230},
                items: [
                    {
                     name:'fullnameEn',
                     id:'fullnameEn',
                        fieldLabel: 'LP名称(英文)'
                    },
                    {
                     name:'shortnameEn',
                     id:'shortnameEn',
                        fieldLabel: 'LP简称(英文)'
                    }
                ]
              }
         ]
    });

    var catalog = new Ext.BoxComponent({
        region: 'west',
        height: 600,
        width:300,
        autoEl: {
            tag: 'div',
            html:'<p>目录标签区域</p>'
        }
    });

    /***Layout******************************************************************/
var layout = new Ext.Viewport({
        layout: 'border',
        items: [toolbar,catalog,form]
    });
layout.render('container');
});效果：