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

williamxiao 2013-10-10 11:29:07
哪位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');
});

...全文
297 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
zy_crazy_code 2015-12-24
  • 打赏
  • 举报
回复
引用 7 楼 auditionlsl 的回复:
我最后是这样做的,也实现了预想的效果,没有使用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');
});
效果:
你在用这种方案做下拉框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
  • 打赏
  • 举报
回复
引用 5 楼 blackant2 的回复:
<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下无法显示,请问你是使用的什么版本?
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>

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧