87,919
社区成员
发帖
与我相关
我的任务
分享Extjs实现如图的布局-table布局下filedlable不显示
哪位EXT大神帮忙实现下如下图这种布局：
我尝试用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:'<p>目录标签区域</p>'
}
});
/***Layout******************************************************************/
var layout = new Ext.Viewport({
layout: 'border',
items: [toolbar,catalog,form]
});
layout.render('container');
});
...全文
请发表友善的回复…
发表回复
zy_crazy_code 2015-12-24
- 打赏
- 举报
你在用这种方案做下拉框combo的时候有没有发现一个bug就是点击文本框也会触发下拉事件？ 请问下您是怎么解决的。谢谢
williamxiao 2013-10-15
- 打赏
- 举报
先谢过楼上几位兄弟了，今天结帖。
williamxiao 2013-10-11
- 打赏
- 举报
我最后是这样做的，也实现了预想的效果，没有使用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');
});
效果：
williamxiao 2013-10-11
- 打赏
- 举报
在Extjs 3.2.0下无法显示，请问你是使用的什么版本？
blackant2 2013-10-10
- 打赏
- 举报
1.可以不使用Viewport
2.toolbar 应该属于formpanel,可以是ttbar或者现在建议的是dockedItems:{dock: 'top'}
3.table使用rowspan /colspan布局,columns使用columnWidth布局
4,你应该使用vbox/hbox嵌套
yibey 2013-10-10
- 打赏
- 举报
Viewport不是指定render到body的么，还有如果你先试用了border布局，然后在center里使用了table布局，我猜是不是 左边的宽度过大了，导致center的布局不够了，然后导致 table布局里的宽度不够，所以fieldLabel显示不出来了。当然如果位置够的情况下 不排除是Extjs的BUG。
建议使用布局 使用3列 HBOX， 然后第一列你按照你的做，后两列使用 VBOX
box布局比较容易控制宽度，以及高度（以及自适应）
blackant2 2013-10-10
- 打赏
- 举报
<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>
我的波塞冬 2013-10-10
- 打赏
- 举报
不行就多层panel嵌套
williamxiao 2013-10-10
- 打赏
- 举报
to all:
你们能够给出合适的代码吗？
to yibey:
现在页面上Viewport是输出到一个层里边的。层定义如下：
<body>
<div id="container" style="width: 100%;height: 100%;"></div>
</body>
