1. 程式人生 > >Extjs下combox 實現級聯

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%'     
       });