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');
});