Extjs2.0之横向Radio经典布局(转)
2010-10-09 08:47
211 查看
最近在做项目的时候遇到这一个问题,找到这样的例子。
经过测试,上面这样的radio横向布局是可以做到的,关键是采用table的layout及radio行的isFormField设置为true,设置isFormField这点尤其重要,因为panel默认不是属于FormField的,因此即使设置了fieldLabel属性也不不会显示label。
生成此window的js如下:
view plaincopy to clipboardprint?
(new Ext.Window(...{
id: 'hall_addPrjWindow',
title: 'title',
layout:'fit',
width: 500,
height: 300,
buttonAlign: 'center',
closeAction: 'hide',
modal: true,
items:[...{
xtype: 'form',
width: 400,
frame.: true,
defaultType: 'textfield',
items:[...{
id: 'prjNm',
fieldLabel: '项目名称',
name: 'prjNm',
value: ''
},...{
xtype: 'panel',
layout: 'table',
fieldLabel: '项目权限',
defaultType: 'radio',
isFormField: true,
items: [...{
name: 'prjPermissionCode',
boxLabel: '自由进入',
value: ''
},...{
name: 'prjPermissionCode',
boxLabel: '需要验证',
value: ''
}]
},...{
id: 'prjStartupDate',
fieldLabel: '预计启动日期',
name: 'prjStartupDate',
value: ''
}]
}],
buttons:[...{
text: '建立新项目',
handler: function()...{
}
}]
})).show();
经过测试,上面这样的radio横向布局是可以做到的,关键是采用table的layout及radio行的isFormField设置为true,设置isFormField这点尤其重要,因为panel默认不是属于FormField的,因此即使设置了fieldLabel属性也不不会显示label。
生成此window的js如下:
view plaincopy to clipboardprint?
(new Ext.Window(...{
id: 'hall_addPrjWindow',
title: 'title',
layout:'fit',
width: 500,
height: 300,
buttonAlign: 'center',
closeAction: 'hide',
modal: true,
items:[...{
xtype: 'form',
width: 400,
frame.: true,
defaultType: 'textfield',
items:[...{
id: 'prjNm',
fieldLabel: '项目名称',
name: 'prjNm',
value: ''
},...{
xtype: 'panel',
layout: 'table',
fieldLabel: '项目权限',
defaultType: 'radio',
isFormField: true,
items: [...{
name: 'prjPermissionCode',
boxLabel: '自由进入',
value: ''
},...{
name: 'prjPermissionCode',
boxLabel: '需要验证',
value: ''
}]
},...{
id: 'prjStartupDate',
fieldLabel: '预计启动日期',
name: 'prjStartupDate',
value: ''
}]
}],
buttons:[...{
text: '建立新项目',
handler: function()...{
}
}]
})).show();
相关文章推荐
- Extjs2.0之横向Radio经典布局
- Extjs2.0之横向Radio经典布局(转)
- Extjs2.0之横向Radio经典布局
- ExtJS2.0实用简明教程——Border区域布局
- ExtJS 2.0 实用简明教程之布局概述
- ExtJS2.0实用简明教程——Column列布局
- Extjs4循序渐进(三)——表单及表单控件详解一(表单布局和基础控件 Text,TextArea,Number,Checkbox,Radio,Date)
- 分享关于Extjs2.0中RadioGroup和CheckboxGroup控件的取值和赋值问题
- ExtJS2.0实用简明教程——Fit布局
- ExtJs 经典布局(一)
- ExtJS2.0实用简明教程——Form布局
- ExtJS2.0实用简明教程 - 布局概述
- ExtJs 经典布局(二)
- ExtJS2.0实用简明教程——Accordion布局
- ExtJS2.0实用简明教程——Card布局
- ExtJS 2.0 实用简明教程之布局概述
- ExtJS2.0实用简明教程——Table布局及其它布局
- Android RadioGroup中横向、竖向布局RadioButton的问题
- ExtJS 经典布局
- ExtJS2.0实用简明教程 - Border区域布局