Ext设置Radio选中,事件失效的问题

本文介绍了一个关于 ExtJS 中 Radio Button 组件的问题及解决方案。当一个 Radio 被选中后,其事件可能不再触发。解决方法是通过设置另一个 Radio 为选中状态,再重新设置原来的 Radio 为非选中状态。

 

问题:设置选中后一个Radio后,Radio的事件失效,

解决办法:设置选中另一个,设置当前的非选中,就好了

var checkPanel= new Ext.form.FormPanel({
	border:false,
    frame:false,
    height:85,
    bodyStyle : 'padding:3 5 0 0', // 表单元素和表单面板的边距
    region: 'north',
    items:[{
			layout : 'column',
			border : false,
			items :[new Ext.form.Radio({
					name : 'rbtnCheck',
					id : 'rbtnCheck_scanAdd',
					checked: true,
					boxLabel:'扫描加', 
					inputValue:'add',
					labelStyle : 'color:blue;',
					width:60,
					listeners : {
						check : function(field, e) {
							if(e){
								setScan();
							}
						}
					}
				}),new Ext.form.Radio({
					name : 'rbtnCheck',
					id : 'rbtnCheck_subtract',
					boxLabel : '扫描减',
					inputValue:'subtract',
					labelStyle : 'color:blue;',
					width:60,
					listeners : {
						check : function(field, e) {
							if(e){
								setScan();
							}
						}
					}
				})

			]
    	}
    ]
});	

var operation = Ext.getCmp('rbtnCheck_scanAdd').getGroupValue();

 

Ext.getCmp("rbtnCheck_scanAdd").setValue(true);
Ext.getCmp("rbtnCheck_subtract").setValue(false);
//Ext.getCmp("rbtnCheck_subtract").reset();

 

<template> <div class="app-container"> <!-- 头部区域 --> <div class="header"> <h1>菜单配置管理</h1> <p>配置系统菜单评价权限及生失效时间</p> </div> <div class="content"> <!-- 搜索区域 --> <div class="search-container"> <div class="search-heder"> <div class="icon"> <em class="el-icon-search"></em> </div> <h2>菜单搜索</h2> </div> <el-select v-model="selectedItem" filterable clearable placeholder="请搜索并选择菜单" @change="handleSelectChange" @clear="handleClear" @focus="handleFocus" remote :remote-method="remoteMethod" > <el-option v-for="item in filteredMenus" :key="item.funcId" :label="item.name" :value="item.menuUrl" /> </el-select> </div> <!-- 表单区域 --> <div class="form-container"> <div class="form-header"> <div class="icon"> <em class="el-icon-setting"></em> </div> <h2>菜单配置信息</h2> </div> <el-form :model="formData" label-width="120px" class="form-container"> <div class="form-row"> <!-- 第一列 --> <div class="form-col"> <el-form-item label="操作员编号"> <el-input v-model="formData.createOpId" disabled /> </el-form-item> </div> <div class="form-col"> <el-form-item label="操作员编码"> <el-input v-model="formData.createOpCode" disabled /> </el-form-item> </div> <div class="form-col"> <el-form-item label="菜单编号"> <el-input v-model="formData.funcId" disabled /> </el-form-item> </div> <!-- 第二列 --> <div class="form-col"> <el-form-item label="系统来源"> <el-input v-model="formData.opSource" disabled /> </el-form-item> </div> <div class="form-col"> <el-form-item label="页面编码"> <el-input v-model="formData.pageCode" disabled /> </el-form-item> </div> <div class="form-col"> <el-form-item label="菜单名称"> <el-input v-model="formData.funcName" disabled /> </el-form-item> </div> <!-- 第三列 --> <div class="form-col"> <el-form-item label="创建时间"> <el-date-picker v-model="formData.createDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" disabled /> </el-form-item> </div> <div class="form-col"> <el-form-item label="生效时间"> <el-date-picker v-model="formData.effectiveDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择生效时间" /> </el-form-item> </div> <div class="form-col"> <el-form-item label="失效时间"> <el-date-picker v-model="formData.expireDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择失效时间" /> </el-form-item> </div> <!-- 第四列 - 单选框单独一行 --> <div class="form-col" style="flex: 0 0 100%; max-width: 100%;"> <el-form-item label="是否可以评价"> <el-radio-group v-model="formData.enabled"> <el-radio :label="true" border>是</el-radio> <el-radio :label="false" border>否</el-radio> </el-radio-group> </el-form-item> </div> </div> <div class="form-actions"> <el-button class="custom-button" @click="resetForm">重置</el-button> <el-button type="primary" class="custom-button" @click="saveForm">保存配置</el-button> </div> </el-form> </div> </div> </div> </template> <script> import { MUTATION } from '../config/constant.js'; import WbStore from '../utils/wbstore'; import { Button, Input, Select, FormItem, RadioGroup, Radio, Form, DatePicker, Option, } from 'element-ui'; import PinyinMatch from 'pinyin-match'; export default { name: 'MenuConfiguration', components: { [Button.name]: Button, [Input.name]: Input, [Select.name]: Select, [FormItem.name]: FormItem, [RadioGroup.name]: RadioGroup, [Form.name]: Form, [DatePicker.name]: DatePicker, [Option.name]: Option, [Radio.name]: Radio, }, data() { return { allMenus: [], selectedItem: null, formData: { createOpId: '', //创建的操作员编号 createOpCode: '', //创建的操作员编码 ext_C: '', //优化举措 ext_B: '', //下载地址 ext_A: '', //详细内容 funcId: '', //菜单编号 opSource: '', //系统来源 pageCode: '', //页面编号 enabled: '', //是否可以评价 A:允许 C:不允许 funcName: '', //菜单名称 hallFuncBaseId: '', //菜单基础编号 expireDate: '', //失效时间 effectiveDate: '', //生效时间 createDate: '', //创建时间 }, filteredMenus: [], }; }, mounted() { let menu_ = WbStore.opsForHash.get(MUTATION.MENUS, 'menus') || {}; this.$store.commit(MUTATION.MENUS, menu_.kMenu); this.allMenus = Object.values(menu_.kMenu); }, methods: { handleFocus() { this.filteredMenus = []; }, handleClear() { this.filteredMenus = []; this.resetForm(); }, remoteMethod(query) { if (query !== '') { this.filterMenu(query); } else { this.filteredMenus = []; } }, filterMenu(query) { this.filteredMenus = this.allMenus.filter(item => { const nameMatch = item.name.includes(query); const pinyinMatch = PinyinMatch.match(item.name, query); return nameMatch || (pinyinMatch && pinyinMatch !== false); }); }, //查询基础信息配置 async handleSelectChange(pageCode) { if (!pageCode) { this.resetForm(); return; } console.log('e', this.selectedItem, pageCode); try { const result = await this.$http.post( 'GW_QRY_HOME_BUSIHOME_QRYHALLFUNCBASEINFO', { pageCode: pageCode }, ); console.log('返回result',result) this.formData = this.transformData(result); } catch (error) { console.error('获取菜单配置失败:', error); } }, transformData(rawData) { delete rawData.retCode; delete rawData.retMessage; return { ...rawData, opSource: rawData.opSource === '1' ? '业务大厅' : '网格通', enabled: rawData.upvoteState === 'A', expireDate: rawData.expireDate.replace('.0', ''), effectiveDate: rawData.effectiveDate.replace('.0', ''), createDate: rawData.createDate.replace('.0', ''), }; }, resetForm() { this.formData.effectiveDate = ''; this.formData.expireDate = ''; this.formData.enabled = ''; }, async saveForm() { if (!this.formData.pageCode) { this.$message.warning('请先选择菜单'); return; } try { console.log('传来的数据表单:', this.formData); let data = { ...this.formData, opSource: '1', upvoteState: this.formData.enabled ? 'A' : 'C' } delete data.enabled; console.log('保存的数据data:', data); await this.$http.post('GW_DEAL_HOME_BUSIHOME_SAVEBASEINFO', data); this.$message({ message: '保存成功', type: 'success', }); } catch (error) { this.$message({ message: '保存失败', type: 'warning', }); } }, }, }; </script> 以上述代码为基础增加逻辑,要求如果查询出来选中的菜单无基础信息配置,则取选中菜单的信息回填给表单的菜单名称,菜单编码,菜单编号(如果菜单无以上值,则对应项可编辑),取缓存内的操作员信息回填给表单的操作员编号,操作员编码(如果无值,则对应项可编辑),系统来源固定展示业务大厅,创建时间无值回填并不可编辑,生失效时间和是否可评价无值,待编辑完毕点击保存,创建时间回填点击保存时的时间
最新发布
07-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值