extJs drop-down box linkage implementation code_extjs

Copy code The code is as follows:

// The first drop-down box
var parentStore = new Ext .data.Store({
proxy: new Ext.data.HttpProxy({
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader ({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping: 'id'},
{name: 'mc ', mapping: 'name'}
])
});
// The second drop-down box
var childStore = new Ext.data.Store({
proxy: new Ext .data.HttpProxy({
//Here are the parameters that can be written by the way. This data source is loaded when the first drop-down box is selected.
url: 'loadByParentid.action?parentid=1001'
}),
reader: new Ext.data.JsonReader({
root: 'list',
id: 'id'
}, [
{name: 'id', mapping : 'id'},
{name: 'mc', mapping: 'name'}
])
});

{
fieldLabel: 'Please select a category' ,
xtype:'combo',
store: parentStore,
valueField: "id",
displayField: "mc",
mode: 'local',
forceSelection: true ,//Must select one item
emptyText: 'Please select a category...',//Default value
hiddenName:'interviewsDetail.parent_category',//hiddenName is the name of the input submitted to the background
editable: false,//Input is not allowed
triggerAction: 'all',//Because this drop-down can only be selected, you must set the attribute triggerAction to all, otherwise when you select an option, you The drop-down will only show selections that match the option value text, and other selections will no longer be displayed, so you cannot change other options.
//allowBlank:false,//This option value cannot be empty
id: 'parent_id',
name: 'parent',
width: 400,
listeners:{
select : function(combo, record,index){
childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' combo.value});
childStore.load( );
}
}
},{
xtype:'combo',
store: childStore,
valueField: "id",
displayField: "mc",
//The data is local
mode: 'local',
forceSelection: true,//One item must be selected
emptyText: 'Please select a subcategory...',//Default value
hiddenName:'interviewsDetail.child_category', //hiddenName is the name of the input submitted to the background
editable: false, //input is not allowed
triggerAction: 'all', //because this drop-down is It can only be selected, so be sure to set the attribute triggerAction to all. Otherwise, when you select an option, your drop-down will only have options that match the option value text, and other options will no longer be displayed. In this way You cannot change other options.
//allowBlank:false,//This option value cannot be empty
fieldLabel: 'select',
id: 'child_id',
name: 'child',
width: 400
}