60.extjs-布局 (在column布局中使用fieldset 和 在fieldset中使用column布局)
转自:https://blog.csdn.net/snn1410/article/details/8817821/
在标准的html中,需要把输入项都放到fieldset中,一次来显示分组结构。虽然EXT中的表单已经很漂亮了,但我么依然可以用fieldset来进行内部分组。
为了突出显示效果,这里我们可以将column和fieldset(fieldset只是一个普通的xtype)结合起来使用
1、
var form = new Ext.form.FormPanel({
labelAlign:'right',
title:'布局',
labelWidth:50,
buttonAlign:'center',
frame:true,
width:600,
items:[{
layout:'column',
items:[
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
autoHeight:true,
defaultType:'textfield',
title:'俩字',
items:[
{fieldLabel:'俩字'},
{fieldLabel:'俩字'}
]
},
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
autoHeight:true,
style:'margin-left:10px',
defaultType:'textfield',
title:'三字',
items:[
{fieldLabel:'三个字'},
{fieldLabel:'三个字'},
{fieldLabel:'三个字'}
]
},
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
style:'margin-left:10px',
autoHeight:true,
title:'四字',
defaultType:'textfield',
items:[
{fieldLabel:'四个字'},
{fieldLabel:'四个字'},
{fieldLabel:'四个字'},
{fieldLabel:'四个字'}
]
}]
},{
xtype:'fieldset',
autoHeight:true,
title:'文本域',
items:[{
width:345,
height:100,
xtype:'textarea',
fieldLabel:'文本域'
}]
}],
buttons:[{
text:'按钮',
handler:function(){}
}]
});
form.render("form");
注意xtyp:'fieldset'如果要内部分组,里面的控件要放在items属性里面
2、
var set = new Ext.form.FieldSet({
title:'fieldset',
columnWidth:.1,
height:80,
layout:'column',
border:true,
anchor:'100%',
labelWidth:40,
items:[{
columnWidth:.4,
layout:'form',
border: false,
items:[{
xtype:'textfield',
fieldLabel:'t1',
name:'t1'
}]
},{
columnWidth:.4,
layout:'form',
border:false,
items:[{
xtype:'textfield',
fieldLabel:'t2',
name:'t2'
}]
}]
});
var setform = new Ext.form.FormPanel({
width:300,
height:80,
labelWidth:80,
labelAlign:'right',
frame:true,
items:[set]
});
var win = new Ext.Window({
title:'fieldSet的column布局',
layout:'fit',
width:500,
height:380,
closeAction:'hide',
items:[setform]
});
win.show();
注意layout:column位置 ,closeAction:'hide' 这个属性值不要弄错了
效果如下图所示:是以一个窗口的形式显示的
60.extjs-布局 (在column布局中使用fieldset 和 在fieldset中使用column布局)的更多相关文章
- Android中measure过程、WRAP_CONTENT详解以及 xml布局文件解析流程浅析
转自:http://www.uml.org.cn/mobiledev/201211221.asp 今天,我着重讲解下如下三个内容: measure过程 WRAP_CONTENT.MATCH_PAREN ...
- Android自定义View研究--View中的原点坐标和XML中布局自定义View时View触摸原点问题
这里只做个汇总~.~独一无二 文章出处:http://blog.csdn.net/djy1992/article/details/9715047 Android自定义View研究--View中的原点坐 ...
- (Android UI)Android应用程序中资源:图片、字符串、颜色、布局等
Android系统设计采用代码和布局分离的设计模式,因此在设计Android应用程序时需要遵循该设计模式. “把非代码资源(如图片和字符串常量)和代码分离开来始终是一种很好的做法.”---<An ...
- css-前端实现左中右三栏布局的常用方法:绝对定位,圣杯,双飞翼,flex,table-cell,网格布局等
1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...
- idea中Entity实体中报错:cannot resolve column/table/...解决办法。
idea中Entity实体中报错:cannot resolve column/table/...解决办法. 若idea中Entity实体中报错: cannot resolve column.... c ...
- CSS中居中的完全指南(中英对照翻译)
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- Android应用项目中BaseAdapter、SimpleAdapter和ArrayAdapter中的三种适配器
一.写在前面: 本次我们来讲解一下Android应用中三个适配器:BaseAdapter.SimpleAdapter和ArrayAdapter.其中常见的是BaseAdapter,也是个人推荐使用的适 ...
- app包中的fragment和v4包中的fragment的使用的区别
app包中的fragment和v4包中的fragment的使用的区别 1.尽量不要用app包中的fragment,因为这个是在3.0之后才有的,支持的版本太高,在低版本中是是用不了的 2.androi ...
- 【我的Android进阶之旅】如何去除ListView中Header View、Footer View中的分割线
最近的项目中给ListView 加入了一个Header View之后,发现Header View的下方也有了分割线,很难看,UI要求将Header View的分割器去掉,好吧.现在就来说一说如何如何去 ...
随机推荐
- iOS-关于一些手势冲突问题(scrollView 嵌套 tableView)
简单说下关于开发中容易遇到的父试图添加手势与子试图点击事件冲突,UIScrollView 嵌套 UIScrollView . UIScrollView 嵌套 UITableView的情况手势冲突问题: ...
- libevent reference Mannual II--library
FYI: http://www.wangafu.net/~nickm/libevent-book/TOC.html The Libevent Reference Manual: Preliminari ...
- 利用WebUploader进行图片批量上传,在页面显示后选择多张图片压缩至指定路径【java】
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- radis入门
redis介绍 是远程的,有客户端.服务端 存内存,吃内存 应用场景 缓存 队列 list操作 push pop 数据存储[根据redis硬盘持久化的机制,这里不展开] 5种数据类型 string 字 ...
- WeChat-小程序-tabbar
WeChat-小程序-tabbar https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E ...
- Spring MVC 概述
[简介] Spring MVC也叫Spring web mvc,属于表现层的框架.SpringMVC是Spring框架的一部分,是在Spring 3.0后发布的. 由以上Spring的结构图可以看出, ...
- [luoguP2875] [USACO07FEB]牛的词汇The Cow Lexicon(DP)
传送门 f[i] 表示前 i 个字符去掉多少个 的最优解 直接暴力DP ——代码 #include <cstdio> #include <cstring> #include & ...
- Uva10562
Professor Homer has been reported missing. We suspect that his recent research works might have had ...
- 备用交换机(cogs 8)
[问题描述] n个城市之间有通讯网络,每个城市都有通讯交换机,直接或间接与其它城市连接.因电子设备容易损坏,需给通讯点配备备用交换机.但备用交换机数量有限,不能全部配备,只能给部分重要城市配置.于是规 ...
- 免XML的SpringMVC配置
Servlet 3.0以后,新增了一些注解,使得web.xml可以省略掉.这样配合Spring的JavaConfig就可以实现免xml的项目配置,这里简单搭建一个免XML的SpringMVC.Spri ...