Ext. form. ComboBox implements cascade of two comboboxes

The function you want to implement is as follows: There are two drop-down boxes, which allow the content of the second drop-down box to load the new value according to the selection result of the first drop-down box, you also want to re-load the new value in the first drop-down box based on the selection result of the second drop-down box.

 

 

 

 

The final result is as follows: when I return data, I return a * purpose. When I click *, all the content in the other drop-down box will be displayed, because I want to achieve mutual selection, for example, when I select a user group, the content of the application group has changed. At this time, I want to select an application and then select a user group. So I clicked * the user group value is restored. The source code is as follows, python is used in the background.

[Javascript]
Function new_publish (published ){

Var user_group_store = new Ext. data. JsonStore ({
Url: '/apply/get_usergroup_list_for_publish', // retrieves data from the background and returns it in dictionary form
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 (); // At this point, all the data I want has
[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) {// here, we implement re-load the corresponding drop-down box value based on the selected value
App_group = record. get ('appgroup ');
If (app_group = '*') {// just give it a new 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; // The returned result is the entire box. It will be OK when you call it.