Ext.form.ComboBox 實現兩個ComboBox 的相互級聯

想實現的功能是這樣的:有兩個下拉框,既想讓第二個下拉框的內容根據第一個下拉框的選擇結果load新值,也想讓第一個下拉框根據第二個下拉框的選擇結果重新load新值

 

 

 

 

最終的效果是這樣的,我返回數據的時候都返回瞭一個 * 目的是,當我點 * 的時候 另一個下拉框的內容將全部展示出,因為我想實現互選,比如當我選瞭用戶組後這時候應用組的內容已經變瞭,這時候我又想先選應用再選用戶組,所以我再點一下 * 用戶組的值又恢復瞭,源碼如下,後臺是python做的

[javascript] 
function new_publish(published){ 
     
        var user_group_store=new Ext.data.JsonStore({ 
        url: '/apply/get_usergroup_list_for_publish',//去後臺取數據,以字典形式返回的 
        root: 'rows', 
        fields: ['name'], 
        successProperty:'success', 
        listeners:{ 
            loadexception:function(obj,opts,res,e){ 
                var store_response=Ext.util.JSON.decode(res.responseText); 
                Ext.MessageBox.alert(_("Error"),store_response.msg); 
            } 
        } 
    }); 
    user_group_store.load(); 
     
    var app_group_store=new Ext.data.JsonStore({ 
        url: '/apply/get_application_group_list_for_publish', 
        root: 'rows', 
        fields: ['appgroup'], 
        successProperty:'success', 
        listeners:{ 
            loadexception:function(obj,opts,res,e){ 
                var store_response=Ext.util.JSON.decode(res.responseText); 
                Ext.MessageBox.alert(_("Error"),store_response.msg); 
            } 
        } 
    }); 
    app_group_store.load();//到這,我要的兩個數據都有瞭 
[javascript] 
       var select_appgroups = new Ext.form.ComboBox({ 
       fieldLabel: _('Select AppGroups'), 
       allowBlank:false, 
       store: app_group_store, 
       emptyText :_("Select AppGroups"), 
       mode: 'local', 
       displayField:'appgroup', 
       valueField:'appgroup', 
    // value:'*', 
       width: 140, 
       triggerAction :'all', 
       forceSelection: true, 
       name:'appgroups', 
    readOnly:true, 
    editable:false, 
    // disabled : true, 
    listeners:{ 
        select:function(combo,record,index){//這裡實現的是根據我選的值讓對應的下拉框值重新load 
            app_group = record.get('appgroup'); 
            if(app_group =='*'){//給它一個新的url即可 
                user_group_store.proxy.conn.url = '/apply/get_usergroup_list_for_publish'; 
                user_group_store.load(); 
            }else{ 
                user_group_store.proxy.conn.url = '/apply/get_user_group_list_for_appg?app_g='+app_group; 
                user_group_store.load(); 
            } 
        } 
    } 
   }); 
 
 
var select_user_group = new Ext.form.ComboBox({ 
       fieldLabel: _('Select User Group'), 
       allowBlank:false, 
       store: user_group_store, 
       emptyText :_("Select User Group"), 
       mode: 'local', 
       displayField:'name', 
       valueField:'name', 
    // value:'*', 
       width: 140, 
       triggerAction :'all', 
       forceSelection: true, 
    readOnly:true, 
    editable:false, 
       name:'name', 
    listeners:{ 
           select:function(combo,record,index){ 
            user_group = record.get('name'); 
            if(user_group =='*'){ 
                app_group_store.proxy.conn.url = '/apply/get_application_group_list_for_publish'; 
                app_group_store.load(); 
            }else{ 
                app_group_store.proxy.conn.url = '/apply/get_application_group_list_for_ug?user_g='+user_group; 
                app_group_store.load(); 
            } 
           } 
       } 
   }); 
 
var simple = new Ext.FormPanel({ 
       labelWidth:120, 
       frame:true, 
       border:0, 
       bodyStyle:'padding:0px 0px 0px 0px', 
       labelAlign:"right" , 
       width:315, 
       height:110, 
       labelSeparator: ' ', 
       items:[select_user_group,select_appgroups] 
   }); 
simple.addButton(_("Publish"),function(){ 
       if (simple.getForm().isValid()) { 
        var usergp=select_user_group.getRawValue(); 
        var appgp=select_appgroups.getRawValue(); 
        if(usergp =='*'){ 
            Ext.MessageBox.alert(_('Error'), _('Please select a user group.')); 
        }else if(appgp == '*'){ 
            Ext.MessageBox.alert(_('Error'), _('Please select a application group.')); 
        }else{ 
            var url="/user/publish_group?user_group="+usergp+"&app_group="+appgp; 
            var ajaxReq=ajaxRequest(url,0,"GET",true); 
            ajaxReq.request({ 
                success: function(xhr) { 
                var response=Ext.util.JSON.decode(xhr.responseText); 
                if(response.success){ 
                    published.store.reload(); 
                    app_group_store.proxy.conn.url = '/apply/get_application_group_list_for_publish'; 
                    app_group_store.load(); 
                    user_group_store.proxy.conn.url = '/apply/get_usergroup_list_for_publish'; 
                    user_group_store.load(); 
                    // select_appgroups.store.reload(); 
                    // select_user_group.store.reload(); 
                    simple.getForm().reset(); 
                 
                    // select_appgroups.disable(); 
                    Ext.MessageBox.alert(_("Success"),response.msg); 
               }else{ 
                   Ext.MessageBox.alert(_("Failure"),response.msg); 
                   } 
               }, 
               failure: function(xhr){ 
                   Ext.MessageBox.alert( _("Failure") , xhr.statusText); 
               } 
           }); 
        } 
       }else{ 
           Ext.MessageBox.alert(_('Error'), _('Please select users and appgroups.')); 
       } 
   }); 
return simple;//這裡返回的就是整個這個框瞭,用的時候調一下就OK瞭 

 

發佈留言