[转]Ext ComboBox 默认选中某一项

原文地址:http://blog.csdn.net/liuguxing/article/details/8623190

  1. 项目中经常用到选择框,需要从后台异步加载数据,可单独写一个组件进行加载
  1. App.ComboBox = function(combo){
  2. var comboBox = new Ext.form.ComboBox({
  3. store:new Ext.data.JsonStore({
  4. autoLoad : false,                                   //设置为false,自己控制什么时候加载数据
  5. url:__ctxPath+"/code/get.do?name="+combo.codeName,
  6. root: 'data',
  7. fields :  ['name','id'],
  8. listeners:{
  9. load:function(){
  10. comboBox.setValue(comboBox.getValue());
  11. }
  12. }
  13. }),
  14. name:combo.name,
  15. fieldLabel:combo.fieldLabel,
  16. id:combo.id,
  17. hiddenName:combo.hiddenName,    //动态生成一个以指定名称命名的隐藏域用来存放值数据
  18. displayField:'name',
  19. valueField :'id',
  20. typeAhead:false,            //值为true时在经过指定延迟(typeAheadDelay)后弹出并自动选择输入的文本,如果该文本与已知的值相匹配
  21. mode:'local',               //如果ComboBox读取本地数据则将值设为'local'(默认为 'remote' 表示从服务器读取数据)。如果设置为remote,并且autoLoad=true,就会加载两次
  22. triggerAction:'all',
  23. emptyText:'请选择...'
  24. });
  25. return comboBox;
  26. };

编辑数据的时候需要默认选中某一项,可编写函数

  1. App.selectComboBox = function(hiddenName,comboBoxId,value){
  1. <span style="white-space:pre">  </span>//需要根据value获取到显示值
  2. var combo = Ext.getCmp(comboBoxId);
  3. var range = combo.getStore().getRange();
  4. if(range != null && range.length>0){
  5. var displayName = value;
  6. for(var i=0;i<range.length;i++){
  7. if(value == range[i].data.id){
  8. displayName = range[i].data.name;
  9. }
  10. }
  11. }
  12. combo.setValue(displayName);<span style="white-space:pre">      </span>//设置显示值<span style="white-space:pre">                </span>
  13. Ext.query("*[name="+hiddenName+"]")[0].value = value;<span style="white-space:pre"> </span>//设置提交到后台的值
  14. }

需要注意的是,在调用App.selectComboBox之前,必须先调用comboBox.getStore().load(); 加载数据,不然上面getRange()获取不到数据。

上一篇:jQuery学习之旅 Item7 区别this和$(this)


下一篇:剑指Offer面试题:19.包含Min函数的栈