Extjs的DataField、Checkbox、RadioGroup控件

1、DataField

定义

this._dateFieldApplyDate = new Ext.form.DateField({
fieldLabel: '申请时间',
value: expertApply.get('id') ? expertApply.get('expertApplyTime') : new Date(),
disabled: true,
allowBlank: false,
width: 200
});

DataField的用法和TextField的用法基本上是一样的，只不过用上了DataField会显示的方式不同而已，在验证上和普通的Textfield是一样的，赋值的时候会有所不同，需要转换一下格式，比如 this._dateFieldApplyDate.getValue().format('Y/m/d');是取出当前框内的值并转换为y/m/d格式，便于数据库保存，需要说明的是，如果当前框内为空，会报错，所以最好的办法是把默认时间为当天填进去。

2、Checkbox

定义

 this._checkBox1 = new Ext.form.Checkbox({
fieldLabel: '是否已婚',
checked: expert.get('isMarried'),
disabled: isShow
});

//在checkBox内我用的是check事件，定义的方式和Textfield的validator事件还有comboBox的select事件是一样的，根据不同的选择实现不同的结果。

this._checkboxOnChange = function (checkbox) {
checkbox.panel._projectBasicPanel1.isVisible() ? checkbox.panel._projectBasicPanel1.setVisible(false) : 
checkbox.panel._projectBasicPanel1.setVisible(true);
}

this._checkBox1.panel = this;
this._checkBox1.on('check', this._checkboxOnChange);

3、RadioGroup

在使用的时候，根据不同的情况自己构造了需要的，首先按照自己的需求进行定义，抽象出自己需要的控件便于在大型的程序中多次使用

定义

 this._radioAudit = new Vpms.component.RadioGroup({
fieldLabel: '审核意见',
allowBlank: false,
width: 250,
items: Vpms.component.RadioGroup.AuditStoreFunction(auditState)//包含的选项数目
});

真正的RadioGroup的定义，当然也是继承自Ext.form.RadioGroup

Ipms.component.RadioGroup = Ext.extend(Ext.form.RadioGroup, {
getName: function () {
return this.items.first().getName();
},
getValue: function () {
var v;
this.items.each(function (item) {
v = item.getRawValue();
return !item.getValue();
});
return v;
},
setValue: function (v) {
this.items.each(function (item) {
item.setValue(item.getRawValue() == v);
});
},
getRadio: function (i) {
return this.items.get(i);
}

});

Ipms.component.RadioGroup.AuditStoreFunction = function (state) {
    var items = [{
    readOnly: false,
    boxLabel: '通过',
    width: 100,
    name: 'Audit',
    inputValue: 'Agree',
    checked: state == ‘1’ ? true : false
}, {
    readOnly: false,
    boxLabel: '驳回',
    width:100,
    name: 'Audit',
    inputValue: 'Reject',
    checked: state == ‘2’ ? true : false
}];
return items;
}

 

 

这里的RadioGroup在getValue()的时候get到的就是其中的inputValue。