combo valueField后台传值问题

本文详细介绍了如何在ExtJS中正确配置组合框以实现特定的功能需求,包括设置valueField和hiddenName属性来传递ID值到后台,以及创建相应的Store和Record。

需要设置valueField: 'id'和hiddenName:'arrayArea'才能将id值传入后台

在action里需要创建String[] arrayArea 属性;属性的值为 id

 

var area={
            xtype:'combo',
            fieldLabel: '商圈',
            width:340,
            name: 'arrayArea',
            width:120,
            store: ds1,
            autoLoad:true,
            displayField: 'name',
            valueField: 'id',
            hiddenName:'arrayArea',
            mode: 'local',
            emptyText:'请选择',
            triggerAction: 'all',
            readOnly:true
}

      var recordType1= new Ext.data.Record.create([
            {name:'id',type:'string'},
            {name:'name',type:'string'}
        ]);
        var ds1 = new Ext.data.Store({
            remoteSort:false,
            proxy:new Ext.data.HttpProxy({url:tagAreaURL}),
            reader:new Ext.data.JsonReader({root:'data',id:'id'},recordType1)
        });
       
        ds1.load({params:{tagName:'通用商圈'}});

<think>好的,用户之前问过关于ExtJS的非空校验,现在又提到了“combo非空”。首先需要确定用户指的是ExtJS中的ComboBox组件的非空校验。ComboBox是下拉选择框,和普通的文本框不同,它可能有不同的校验需求。 用户之前得到了详细的非空校验解决方案,但可能在使用ComboBox时遇到了具体的问题。比如,ComboBox的allowBlank配置是否有效,或者如何正确处理空。需要回忆ExtJS中ComboBox的配置项,特别是与校验相关的属性,比如allowBlank、valueField、displayField等。 可能用户遇到了即使设置了allowBlank: false,但校验不生效的情况。这可能是因为ComboBox的类型问题,比如当valueField未正确设置时,实际提交的可能是displayField的内容,导致校验逻辑出错。或者,用户可能在使用远程加载的数据时,没有正确处理空选项的情况。 另外,ComboBox有forceSelection配置项,如果设置为true,用户只能选择列表中的项,不能输入其他。这可能与非空校验有关联,需要说明如何结合使用这些配置。 还需要考虑自定义校验的情况,比如当ComboBox的需要满足特定条件时,如何通过validator函数来实现。同时,表单提交时的整体校验逻辑也需要涉及,确保ComboBox的校验能被正确触发。 另外,用户可能需要处理空的显示问题,比如设置emptyText属性,或者如何处理当用户清空选择时的提示信息。错误消息的位置(msgTarget)也可能需要调整,确保用户能清楚看到错误提示。 还要考虑动态加载数据的情况,比如当ComboBox的数据源是异步加载时,校验逻辑可能需要等待数据加载完成后再执行,否则可能因为数据未准备好而导致校验错误。 总结用户可能的真实需求:正确配置ExtJS的ComboBox组件,使其能够有效进行非空校验,处理各种边界情况,如动态数据加载、自定义校验规则、错误提示位置等,并确保与表单其他组件的校验协同工作。</think>#### ExtJS ComboBox 非空校验完整指南 --- ### 一、核心校验配置 #### 1. 基础必填校验 ```javascript { xtype: 'combo', fieldLabel: '选择城市', allowBlank: false, // 核心校验开关 blankText: '请选择城市', // 自定义提示 msgTarget: 'under', // 错误显示位置 forceSelection: true // 强制选择列表项 } ``` #### 2. 特殊处理 ```javascript { valueField: 'id', // 实际字段 displayField: 'name', // 显示字段 emptyText: '请选择...', // 空占位符 listeners: { select: function(combo) { combo.validate(); // 选择后立即验证 } } } ``` --- ### 二、常见问题解决方案 #### 1. 空处理异常 **问题现象** 设置`allowBlank: false`后仍然可以提交空 **修复方案** ```javascript { forceSelection: true, // 必须选择列表项 selectOnFocus: true, // 聚焦时展开列表 typeAhead: true // 输入自动匹配 } ``` #### 2. 远程数据加载校验 ```javascript { queryMode: 'remote', // 远程模式 listeners: { beforequery: function(queryEvent) { return queryEvent.query !== ''; // 拦截空查询 } }, validator: function(value) { return this.store.contains(this.valueField, value) ? true : "无效选项"; // 校验存储中是否存在 } } ``` --- ### 三、高级校验技巧 #### 1. 动态必填控制 ```javascript { xtype: 'combo', listeners: { change: function(field, newVal) { field.allowBlank = (newVal !== '特殊'); // 动态修改规则 field.validate(); } } } ``` #### 2. 联动校验示例 ```javascript { xtype: 'combo', fieldLabel: '省份', listeners: { select: function(combo) { var cityCombo = combo.up('form').down('#cityCombo'); cityCombo.reset(); // 重置关联控件 cityCombo.setDisabled(false); cityCombo.validate(); } } } ``` --- ### 四、自定义校验方案 #### 1. 扩展Combo组件 ```javascript Ext.define('App.form.RequiredCombo', { extend: 'Ext.form.ComboBox', alias: 'widget.requiredcombo', initComponent: function() { this.validator = this.customValidator; this.callParent(); }, customValidator: function(value) { if (this.allowBlank && !value) return true; return this.store.findExact(this.valueField, value) >= 0 ? true : '请选择有效选项'; } }); ``` #### 2. 异步远程验证 ```javascript { validator: function(value) { if (!value) return true; Ext.Ajax.request({ url: '/validate/option', params: { value: value }, success: function(resp) { var valid = Ext.JSON.decode(resp.responseText).valid; this.setActiveError(valid ? '' : '无效选项'); }, scope: this }); return true; // 临时通过验证 } } ``` --- ### 五、最佳实践建议 1. **数据加载优化** ```javascript { minChars: 2, // 最小触发字符数 pageSize: 20, // 分页加载 queryDelay: 500 // 输入延迟 } ``` 2. **校验状态可视化** ```css /* 自定义错误样式 */ .x-form-invalid-combo { border-color: #e74c3c !important; background-image: url('error-icon.png') !important; background-position: right 8px center; } ``` 3. **复合校验规则** ```javascript Ext.applyIf(config, { vtypes: { specialCombo: { validator: function(val, field) { return val ? field.store.contains(field.valueField, val) : true; }, msg: '必须选择有效选项' } } }); ``` --- ### 六、调试技巧 #### 1. 校验状态检测 ```javascript // 控制台检测有效性 var combo = Ext.ComponentQuery.query('#myCombo')[0]; console.log('是否有效:', combo.isValid()); console.log('原始:', combo.getRawValue()); console.log('实际:', combo.getValue()); ``` #### 2. 存储数据验证 ```javascript // 确保存储加载完成 combo.store.on('load', function() { console.log('存储数据:', this.queryRecords()); }); ``` --- #### 常见问题排查表 | 现象 | 可能原因 | 解决方案 | |----------------------|-------------------------|----------------------------| | 显示与实际不符 | displayField/valueField配置错误 | 检查数据模型字段映射 | | 无法触发验证 | forceSelection未启用 | 设置forceSelection: true | | 远程数据验证失败 | 未正确处理空响应 | 添加空结果处理逻辑 | | 校验提示位置异常 | msgTarget配置冲突 | 调整为'under'或'qtip' | 通过以上配置可实现ComboBox的精准非空控制,特别要注意`valueField`与`displayField`的配合使用。对于企业级应用,建议封装通用校验组件并建立统一的校验规则库。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值