Extjs下combox 实现级联

    //**测试下拉框级联**   
     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'}     
         ])     
        });  


    //单位字段   
       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%'     
       });  



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值