单选框和复选框组
//Ext.form.CheckboxGroup和Ext.form.RadioGroup
/// <reference path="Extjs/ext-all-dev.js" />
Ext.get(document.body).update("<div></div>")
var f_Pannel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
frame: true,
width: 250,
height: 150,
defaults: {
labelSepator: ':',
labelWidth: 28,
labelAlign: 'left',//面板中有两个元素:label表单字段标签和表单字段,这里就是表单面板对象,所以可以在这里定义label位置
width: 200,//定义表单字段的大小,这里是radiogroup和checkboxgroup的宽度。
//boxLabelAlign: 'before'//单选or复选框内容标签的位置,默认为after。还可设定为before。应该放到radio和checkbox对象中
//才会其作用
},
items: [
{
xtype: 'radiogroup', fieldLabel: '性别', columns: 2,//radio和checkbox仍然数序Ext。form。field的范畴,所以可以
items: [ //这里仍然是filedLabel定义标签内容。columns定义单选框的列数。
{ boxLabel: '男', name: 'sex' },//boxLabel用以定义radio和checkbox的框内容,name用以定义组件是标识,在
{ boxLabel: '女', name: 'sex' }//向后台传输数据时是其标识,即是其身份证。在radio使用name,name要定义为相同值
] //这样才能实现radio只能选择一个的功能
},
{
xtype: 'checkboxgroup', fieldLabel: '爱好', columns: 3,//columns可能影响到boxLabel的显示问题,其显示可能不能在一行完成
items: [ //labelBox值可能会在两行显示~很不美观。columns和width同时影响着boxLabel的显示问题。
{ boxLabel: '唱歌', name: 's' },
{ boxLabel: '远足', name: 'h' },
{ boxLabel: '钓鱼', name: 'f' },
{ boxLabel: 'read', name: 'r' },
{ boxLabel: 'mov', name: 'm' }
]
}
]
});
//Ext。form。CheckGroup和Ext。form。RadioBox
/// <reference path="Extjs/ext-all-dev.js" />
Ext.get(document.body).update("<div></div>")
var f_Pannel = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
frame: true,
width: 250,
height: 150,
defaults: {
labelSepator: ':',
labelWidth: 28,
labelAlign: 'left',//面板中有两个元素:label表单字段标签和表单字段,这里就是表单面板对象,所以可以在这里定义label位置
width: 200,//定义表单字段的大小,这里是radiogroup和checkboxgroup的宽度。
//boxLabelAlign: 'before'//单选or复选框内容标签的位置,默认为after。还可设定为before。应该放到radio和checkbox对象中
//才会其作用
},
items: [
{
xtype: 'radiogroup', fieldLabel: '性别', columns: 2,//radio和checkbox仍然数序Ext。form。field的范畴,所以可以
items: [ //这里仍然是filedLabel定义标签内容。columns定义单选框的列数。
{ boxLabel: '男', name: 'sex' },//boxLabel用以定义radio和checkbox的框内容,name用以定义组件是标识,在
{ boxLabel: '女', name: 'sex' }//向后台传输数据时是其标识,即是其身份证。在radio使用name,name要定义为相同值
] //这样才能实现radio只能选择一个的功能
},
{
xtype: 'checkboxgroup', fieldLabel: '爱好', columns: 3,//columns可能影响到boxLabel的显示问题,其显示可能不能在一行完成
items: [ //labelBox值可能会在两行显示~很不美观。columns和width同时影响着boxLabel的显示问题。
{ boxLabel: '唱歌', name: 's' },
{ boxLabel: '远足', name: 'h' },
{ boxLabel: '钓鱼', name: 'f' },
{ boxLabel: 'read', name: 'r' },
{ boxLabel: 'mov', name: 'm' }
]
}
]
});
//Ext。form。CheckGroup和Ext。form。RadioBox