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

Extjs实现如图的布局-table布局下filedlable不显示
哪位EXT大神帮忙实现下如下图这种布局：
Extjs实现如图的格局-table布局下filedlable不显示

我尝试用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:'&lt;p&gt;目录标签区域&lt;/p&gt;'
        }
    });
    
    /***Layout******************************************************************/
var layout = new Ext.Viewport({
        layout: 'border',
        items: [toolbar,catalog,form]
    });
layout.render('container'); 
 
});

extjs布局 table布局filedlable不显示
[解决办法]
Viewport不是指定render到body的么，还有如果你先试用了border布局，然后在center里使用了table布局，我猜是不是左边的宽度过大了，导致center的布局不够了，然后导致 table布局里的宽度不够，所以fieldLabel显示不出来了。当然如果位置够的情况下不排除是Extjs的BUG。

建议使用布局使用3列 HBOX，然后第一列你按照你的做，后两列使用 VBOX
box布局比较容易控制宽度，以及高度（以及自适应）
[解决办法]
不行就多层panel嵌套
[解决办法]
<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实现如图的格局-table布局下file

热点推荐