extjs 表单中下拉选项组件(combo)的用法


{
//cls : 'key',
id:'noticeType',
xtype : 'combo',
fieldLabel : '通知类型',
labelSeparator : ':',
//value : '',
multiSelect : false,
//name: 'meetingType',
hiddenName : 'meetingClass',
valueField : 'dictdataCode',//'dictdataCode',
displayField : 'dictdataName',//'dictdataName',
store : meetingTypeDs,
/*new Ext.data.SimpleStore({
fields:['name','value'],
data:[['全部','0'],['会议','meeting001'],['其它','meeting002']]
}),*/
//typeAhead : true,
mode : 'local',// default: remote
triggerAction : 'all',
emptyText : '请选择数据项',
//selectOnFocus : true,
readOnly : false,
//editable : false,
anchor : '96%',
listeners:{
blur : function(combo){
var value= Ext.getDom('noticeType').value;
//根据手动输入值查询是否有匹配的数据
var result = meetingTypeDs.query('dictdataName',value,true,true);
if(result.getCount()!=1){//store没有匹配的数据,则按输入值查询

combo.setValue(value);
}
}
}
//lazyInit : true
}


重点说说自定义选项的添加和可编辑状态下的值同步的问题
1、可编辑状态下的值同步
有时候下拉择可能也要可编辑,即除了可选的那几个值,也可提供用户输入任意值的功能
以上代码即是这一需求的实现。思路是:
(1)为combo加上id值,这样可以获得可输入控件,是数据同步的前提
(2)将用户输入的值作为条件去store里查询,结果的数量为1表示store里有一条与用户输入的值一样,否则将用户输入的值赋给combo
(3)以上工作要在监听里执行

2、添加自定义的选择项
ext的combox很不友好,没有空值的选项。只能自己加上了

meetingTypeDs = new Ext.data.JsonStore({
url:'dict_getDictData.action?dictCode=meeting_type',
totalProperty : 'totalSize',
id : 'id',
root : 'list',
remoteSort:true,
fields:["dictdataCode","dictdataName"], //
listeners:{
//向已有数据中插入一条新的数据
load : function(store, records, options ){
var data = {'dictdataCode':'','dictdataName':'全部类型'};
var rs = [new Ext.data.Record(data)];
store.insert(0,rs);
}
}

});


最后抱怨一下ext的combox的不足:
1、不能方便的加上自己的缺省选择项,对store的要求太多。

2、提供了一量选择一项便再也不能恢复到始状态。提供了emptyText这一属性,却不太好用,实际应用中,我们经常需要恢复到空值状态,也就是什么都不先的状态。目前2.3版的ext还无法提供
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值