Ext.form.field.CheckBox复选框和Ext.form.field.Radio单选框
1、Ext.form.field.CheckBox和Ext.form.field.Radio主要配置项目
配置项 | 类型 | 说明 |
---|---|---|
boxLabel | String | 紧靠复选框的文字描述 |
boxLabelAlign | String | 设置复选框关联标签的位置, 有效值包括:“before”和“after”,默认为“after” |
checked | Boolean | 设置复选框默认是否被选中,默认为false |
handler | Function | 设置当选中状态发生变化时的处理函数, 传入参数为: checkbox:Ext.form.Checkbox复选框组件 checked:Boolean新的选中状态 |
inputValue | String | 提交值,默认为“on” |
scope | Object | 设置handler处理函数的作用范围 |
uncheckedValue | String | 设置当复选框未选中时向后台提交的值,默认为undefined |
selModel:
Ext.create('Ext.selection.CheckboxModel', {
injectCheckbox:1,//checkbox位于哪一列,默认值为0
mode:'single',//multi,simple,single;默认为多选multi
checkOnly:true,//如果值为true,则只用点击checkbox列才能选中此条记录
allowDeselect:true,//如果值true,并且mode值为单选(single)时,可以通过点击checkbox取消对其的选择
enableKeyNav:false,
listeners: {
deselect: function(model,record,index) {//取消选中时产生的事件
},
select: function(model,record,index) {//record被选中时产生的事件
record.get('name');//选中的节目名称
},
selectionchange: function(model,selected) {//选择有改变时产生的事件
var records=model.getSelection();
if(records!='') {
for(var i in records) {
records[i].get('name')//选中的节目名称(方法一)
}
}
单选框组实例
var M1YES = new Ext.form.Radio({
name:"m1",
width:70,
boxLabel:"授权",
inputValue:"1"
});
var M1NO = new Ext.form.Radio({
name:"m1",
boxLabel:"不授权",
width:70,
inputValue:"0"
});
var txtM1CardIsOpen = new Ext.form.RadioGroup({
fieldLabel: 'M1卡',
items:[M1YES,M1NO],
allowBlank: true,
listeners:{
width:70,
boxLabel:"授权",
inputValue:"1"
});
var M1NO = new Ext.form.Radio({
name:"m1",
boxLabel:"不授权",
width:70,
inputValue:"0"
});
var txtM1CardIsOpen = new Ext.form.RadioGroup({
fieldLabel: 'M1卡',
items:[M1YES,M1NO],
allowBlank: true,
listeners:{
afterrender:function () {
txtM1CardIsOpen.items.get(1).setValue(true);//默认选择第二个
}
}
}
});
if (data.data.m1cardisopen) { update模式赋值
txtM1CardIsOpen.items.get(0).setValue(true);
} else {
txtM1CardIsOpen.items.get(1).setValue(true);
txtM1CardIsOpen.items.get(0).setValue(true);
} else {
txtM1CardIsOpen.items.get(1).setValue(true);
}
2、Ext.form.field.CheckBox和Ext.form.field.Radio示例
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ext.form.field.CheckBox和Ext.form.field.Radio示例</title> <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { new Ext.form.Panel({ title: "Ext.form.field.CheckBox和Ext.form.field.Radio示例", bodyStyle: "padding:5", frame: true, height: 150, width: 300, renderTo: Ext.getBody(), defaults: { labelSeparator: ":", labelWidth: 80, width: 200, labelAlign: "left" }, items: [{ xtype:"radio", name:"sex", fieldLabel:"性别", boxLabel:"男" }, { xtype: "radio", name: "sex", fieldLabel: "性别", boxLabel: "女" }, { xtype: "checkboxfield", name: "swim", fieldLabel: "爱好", boxLabel: "游泳" }, { xtype: "checkboxfield", name: "walk", fieldLabel: "爱好", boxLabel: "散步" }] }); }); </script> </head> <body> </body> </html>
效果图: