RadioGroup和CheckboxGroup的赋值问题

本文解决Ext2.2中Ext.form.FormPanel使用setValues方法对RadioGroup及CheckboxGroup内元素赋值的问题。通过扩展BasicForm的findField方法实现对复选框组和单选按钮组的支持。

在Ext2.2的Ext.form.FormPanel中如果有RadioGroup或者CheckboxGroup,那么FormPanel.form.setValues方法对这2个东东内部的radio和checkbox无法动态赋值,需要对Ext.form.BasicForm的findField方法进行修正,代码如下:

Ext.override(Ext.form.BasicForm,{
    findField : function(id){        
        var field = this.items.get(id);        
        if(!field){
            this.items.each(function(f){
                if(f.isXType('radiogroup')||f.isXType('checkboxgroup')){
                    f.items.each(function(c){
                        if(c.isFormField && (c.dataIndex == id || c.id == id || c.getName() == id)){
                            field = c;
                            return false;
                        }
                    });
                }
                                
                if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                    field = f;
                    return false;
                }
            });
        }
        return field || null;
    } 
});

 

<template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop="name"> <Input v-model="formValidate.name" placeholder="Enter your name"></Input> </FormItem> <FormItem label="E-mail" prop="mail"> <Input v-model="formValidate.mail" placeholder="Enter your e-mail"></Input> </FormItem> <FormItem label="City" prop="city"> <Select v-model="formValidate.city" placeholder="Select your city"> <Option value="beijing">New York</Option> <Option value="shanghai">London</Option> <Option value="shenzhen">Sydney</Option> </Select> </FormItem> <FormItem label="Date"> <Row> <Col span="11"> <FormItem prop="date"> <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker> </FormItem> </Col> <Col span="2" style="text-align: center">-</Col> <Col span="11"> <FormItem prop="time"> <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker> </FormItem> </Col> </Row> </FormItem> <FormItem label="Gender" prop="gender"> <RadioGroup v-model="formValidate.gender"> <Radio label="male">Male</Radio> <Radio label="female">Female</Radio> </RadioGroup> </FormItem> <FormItem label="Hobby" prop="interest"> <CheckboxGroup v-model="formValidate.interest"> <Checkbox label="Eat"></Checkbox> <Checkbox label="Sleep"></Checkbox> <Checkbox label="Run"></Checkbox> <Checkbox label="Movie"></Checkbox> </CheckboxGroup> </FormItem> <FormItem label="Desc" prop="desc"> <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> </FormItem> <FormItem> <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button> <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button> </FormItem> </Form> </template> <script> export default { data () { return { formValidate: { name: '', mail: '', city: '', gender: '', interest: [], date: '', time: '', desc: '' }, ruleValidate: { name: [ { required: true, message: 'The name cannot be empty', trigger: 'blur' } ], mail: [ { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' }, { type: 'email', message: 'Incorrect email format', trigger: 'blur' } ], city: [ { required: true, message: 'Please select the city', trigger: 'change' } ], gender: [ { required: true, message: 'Please select gender', trigger: 'change' } ], interest: [ { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' }, { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' } ], date: [ { required: true, type: 'date', message: 'Please select the date', trigger: 'change' } ], time: [ { required: true, type: 'string', message: 'Please select time', trigger: 'change' } ], desc: [ { required: true, message: 'Please enter a personal introduction', trigger: 'blur' }, { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' } ] } } }, methods: { handleSubmit (name) { this.$refs[name].validate((valid) => { if (valid) { this.$Message.success('Success!'); } else { this.$Message.error('Fail!'); } }) }, handleReset (name) { this.$refs[name].resetFields(); } } } </script> 为什么有些项目人员不在formValidate对象里定义属性也可以直接通过formValidate.xxx读到对应的属性呢
最新发布
11-27
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值