容器字段FieldContainer
来源:互联网 发布:网络爬虫视频 编辑:程序博客网 时间:2024/05/21 10:26
//Ext.form.FieldContainer扩展自Ext.container.Container。当需要把多个字段或组件作为一个表单项展示的时候就需要此组件
Ext.QuickTips.init();//它可以把子元素排列好,并且在表单中提供唯一标签。
//Ext.get(document.body).update("<div></div>");
var f_Pannel = Ext.create('Ext.form.Panel', {
title: '容器字段实例',
//bodyPadding: 5,
renderTo: Ext.getBody(),
frame: true,
width: 400,
msgTarget:'side',
//height: 300,
fieldDefaults: {
//xtype: 'textfield',
labelWidth: 60,
width: 230//面板中的子组件是230,labelWidth+表单字段的宽度是230。
},
defaultType: 'textfield',
items: [{
fieldLabel: "商品名称"
},
{
xtype: 'fieldcontainer', fieldLabel: '生产日期',//fieldcontainer继承自Container,并混入了Labellabel
layout: {//因此
type:'hbox',//容器类字段水平摆放在一起,若为vbox则是垂直放在一起。
align:'middle'//这些组件在容器中的摆放位置。
},
combineErrors:true,
fieldDefaults:
{//width:230,即使在此处设置字段宽度为230,FieldContainer中的字段宽度依然不是230.
hideLabel: true,
allowBlank: false
},
defaultType: 'textfield',
items: [
{ inputId: 'yearId', fieldLabel: '年',flex:1},//在这里FieldContainer宽度仍然是230,但是不设置flex,则此字段就会占据Field
{ xtype: 'label', forId: 'yearId', text: '年' }, //容器大部分空间,以下其他字段无法显示。所以在Field容器中必须为每个要显示的字段配置flex属性。
//当容器布局为hbox时,容器内字段配置项flex是按比例分割容器的宽度而不分割高度
//为vbox时,按比例分割高度而不是宽度。
//flex必须在各表单字段内声明,表示各组件占总容器高度/宽度的比例。
{ inputId: 'monthId', fieldLabel: '月' ,flex:1},
{ xtype: 'label', forId: 'monthId', text: '月' },
{ inputId: 'dayId', fieldLabel: '日',flex:1},
{ xtype: 'label', forId: 'dayId', text: '日' },
],
},
{ fieldLabel: '产地来源' }
]
});
Ext.QuickTips.init();//它可以把子元素排列好,并且在表单中提供唯一标签。
//Ext.get(document.body).update("<div></div>");
var f_Pannel = Ext.create('Ext.form.Panel', {
title: '容器字段实例',
//bodyPadding: 5,
renderTo: Ext.getBody(),
frame: true,
width: 400,
msgTarget:'side',
//height: 300,
fieldDefaults: {
//xtype: 'textfield',
labelWidth: 60,
width: 230//面板中的子组件是230,labelWidth+表单字段的宽度是230。
},
defaultType: 'textfield',
items: [{
fieldLabel: "商品名称"
},
{
xtype: 'fieldcontainer', fieldLabel: '生产日期',//fieldcontainer继承自Container,并混入了Labellabel
layout: {//因此
type:'hbox',//容器类字段水平摆放在一起,若为vbox则是垂直放在一起。
align:'middle'//这些组件在容器中的摆放位置。
},
combineErrors:true,
fieldDefaults:
{//width:230,即使在此处设置字段宽度为230,FieldContainer中的字段宽度依然不是230.
hideLabel: true,
allowBlank: false
},
defaultType: 'textfield',
items: [
{ inputId: 'yearId', fieldLabel: '年',flex:1},//在这里FieldContainer宽度仍然是230,但是不设置flex,则此字段就会占据Field
{ xtype: 'label', forId: 'yearId', text: '年' }, //容器大部分空间,以下其他字段无法显示。所以在Field容器中必须为每个要显示的字段配置flex属性。
//当容器布局为hbox时,容器内字段配置项flex是按比例分割容器的宽度而不分割高度
//为vbox时,按比例分割高度而不是宽度。
//flex必须在各表单字段内声明,表示各组件占总容器高度/宽度的比例。
{ inputId: 'monthId', fieldLabel: '月' ,flex:1},
{ xtype: 'label', forId: 'monthId', text: '月' },
{ inputId: 'dayId', fieldLabel: '日',flex:1},
{ xtype: 'label', forId: 'dayId', text: '日' },
],
},
{ fieldLabel: '产地来源' }
]
});
0 0
- 容器字段FieldContainer
- (20)ExtJS之Ext.form.FieldContainer容器字段
- ASP.NET+ExtJs4.0+FieldContainer的用法
- Extjs4中的Form之fieldcontainer的使用
- vbox下FieldContainer的行距设置
- Java根据容器(List,ArrayList)内对象的字段排序
- Ext.js5表格—多列的表格(比fieldcontainer布局效率很多)(48)
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 容器
- 爱生活爱分享-->爱奇艺、优酷、好莱坞、PPTV等免费资源
- VS2010中检测内存泄露
- TDD之驱动程序和占位程序,和类的接口与实现
- ags infoWindow 应用
- oracle可重复执行脚本写法---总结
- 容器字段FieldContainer
- 狄利克雷过程的五种理解
- 随笔
- Frameset导致Cookies和Session丢失的原因及解决办法
- POJ 2777 Count Color(线段树+位运算)
- leetcode Subsets
- 地图显示实例
- Spring IOC的原理及详解。
- usb不能正常拔下来