注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

风之泪

风过雨过,花开花落。。。

 
 
 

日志

 
 

ExtJs ComboBox级联  

2010-11-18 17:02:49|  分类: extjs |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
ExtJs的ComboBox级联实现

1、首先定义store


Js代码
//**测试下拉框级联**   
 var storedm = new Ext.data.Store({   //队名称下拉框   
     proxy: new Ext.data.HttpProxy({      
         url: '../servlet/CommonMethod?command=getdm'     
     }),      
     reader: new Ext.data.JsonReader({      
     root: 'dms',      
     id: 'id'  
     }, [      
         {name: 'id', mapping: 'id'},      
         {name: 'mc', mapping: 'mc'}      
     ])      
    });    
       
    var storejh = new Ext.data.Store({  //井号选择下拉框   
     proxy: new Ext.data.HttpProxy({      
         url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的   
     }),      
     reader: new Ext.data.JsonReader({      
     root: 'jhs',      
     id: 'jh'     
     }, [      
         {name: 'jh', mapping: 'jh'},      
         {name: 'jm', mapping: 'jm'}      
     ])      
    });  
//**测试下拉框级联**   var storedm = new Ext.data.Store({   //队名称下拉框       proxy: new Ext.data.HttpProxy({              url: '../servlet/CommonMethod?command=getdm'         }),          reader: new Ext.data.JsonReader({          root: 'dms',          id: 'id'       }, [              {name: 'id', mapping: 'id'},              {name: 'mc', mapping: 'mc'}          ])         });             var storejh = new Ext.data.Store({  //井号选择下拉框       proxy: new Ext.data.HttpProxy({              url: '../servlet/CommonMethod?command=getjh' //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的       }),          reader: new Ext.data.JsonReader({          root: 'jhs',          id: 'jh'         }, [              {name: 'jh', mapping: 'jh'},              {name: 'jm', mapping: 'jm'}          ])         });  

 2、然后定义ComboBox


Js代码 复制代码
//单位字段   
   var dwField = new Ext.form.ComboBox({   
    fieldLabel:'所属队',   
    name:'DW',   
    //hiddenName:'DW',//hiddenName才是提交到后台的input的name(既select的value值)      
    allowBlank:false,   
    mode: 'local',   
    readOnly:true,   
    triggerAction:'all',   
    anchor:'90%',   
    emptyText:'请选择...',//默认值      
    store:storedm,   
    listeners:{        
           select : function(combo, record,index)   
           {      
            jhField.clearValue(); //可以实现当队下拉值变更时,清空之前井号下拉选项中的值   
               
           storejh.proxy= new Ext.data.HttpProxy({url: '../servlet/CommonMethod?command=' + combo.value}); //根据队下拉选项的改变,动态取出对应的井   
                  
           storejh.load(); //加载井下拉框的store      
           }      
       },   
       listClass: 'x-combo-list-small', //测试的属性   
       lastQuery:'', //测试的属性   
    valueField: 'id',   
    displayField: 'mc'  
});   
  
storedm.load(); //载入队下拉框的信息   
  
//井号字段   
   var jhField = new Ext.form.ComboBox({      
       xtype:'combo',      
       store: storejh,      
       valueField :"jh",      
       displayField: "jm",      
       //数据是在本地      
       mode: 'local',      
       //forceSelection: true,//必须选择一项      
       emptyText:'请选择井号...',//默认值      
       hiddenName:'JH',//hiddenName才是提交到后台的input的name(既select的value值)      
       editable: false,//不允许输入      
       triggerAction: 'all',//因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。      
       allowBlank:false,//该选项值不能为空      
       fieldLabel: '井号',      
       id : 'jh_id',      
       name: 'JH',      
       anchor:'90%'     
   });
  评论这张
 
阅读(1573)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017