One implementation of extjs multi-level linkage menu

1. the combos control in extjs can be used to define the data source store in the following way: Code

VaR Store =   New Ext. Data. simplestore ({ // Define the data source displayed in the combo box
// Fields: ['item', 'itemvalue'],
Fields :[ ' Item ' , ' Itemvalue ' , ' Parentid ' , ' Strvalueid ' ],
Data: arrayitemstore
});

Fields can set multiple fields, as long as they are consistent with the value assignment of the data attribute. The value assignment of data must be a nested array. The word element of the array is the array defined by fields, as shown below:

Data:
[

[ ' Company 1 ' , ' 2458 ' , ' 0 ' , ' 48 ' ], // It must be consistent with the array dimension defined by fields.
[ ' Company 2 ' , ' 542 ' , ' 0 ' , ' 478 ' ],
[ ' Company 3 ' , ' 45 ' , ' 0 ' , ' 47 ' ]

]

 

 

2. Join the company and region and associate them with parentid. You can add the followingCode:

Code

VaR CO = Ext. getcmp ( " CO " );
VaR DQ = Ext. getcmp ( " DQ " );
If ( ! Ext. isempty (CO )){
CO. On ( ' Beforeselect ' , Function (Box, record, index ){
DQ. Store. Filter ( ' Parentid ' , Record. Get ( ' Strvalueid ' ));
}

 

The record here is the data set of the currently selected item passed by extjs, so that we can conveniently obtain the data item we used to define the store for combos.
The DQ. Store. filter method is used to filter data in the combos region. It is important to note that the region combos must contain all the regions.
To read data from the database in the combos region, use the following format:

Code

// Function that gets City store
Function Getcitystore ()
{
VaR Store =   New Ext. Data. jsonstore ({
URL: ' Get-city-by-country-ID ' ,
// Baseparams: countryID: countryidvar,
Fields :[
{Name: ' Cityid ' , Type: ' Int ' },
' Cityname '  
]
});
Return Store;
}

// Than I have a countries combo
VaR Countries =   New Ext. Form. ComboBox ({
ID: ' Country ' ,
Store: getcountrystore (),
Typeahead: True ,
Triggeraction: ' All ' ,
Emptytext: ' ... ' ,
Listeners :{
Select :{
FN: Function (Combo, value ){
VaR Modeldest = Ext. getcmp ( ' City ' );
// Set and disable cities
Modeldest. setdisabled ( True );
Modeldest. setvalue ( '' );
Modeldest. Store. removeall ();
// Reload region store and enable Region
Modeldest. Store. Reload ({
Params: {countryID: combo. getvalue ()}
});
Modelreg. setdisabled ( False );
}
}
}
})

 

 

Method 3:

VaR Provinces = [[1, 'Beijing' ], [2, 'Shanghai' ];

2. VaRCities =NewArray ();
4. Cities [1] = [11,'Haidian'], [22,'Dongcheng'];
6. Cities [2] = [[33,'Whampoa'], [44,'Pudong'], [55,'Jingand'];
10. VaRComboprovinces =NewExt. Form. ComboBox ({
14. Store:NewExt. Data. simplestore ({
16. Fields :["Provinceid","Provincename"],
18. Data: Provinces
20. }),
24. Listeners :{
26. Select:Function(Combo, record, index ){
28. Combocities. clearvalue ();
30. Combocities. Store. loaddata (cities [record. Data. provinceid]);
32. }
34. },
38. Valuefield:"Provinceid",
40. Displayfield:"Provincename",
42. Mode:'Local',
44. Forceselection:True,
46. Blanktext:'Select a province',
48. Emptytext:'Select a province',
50. Hiddenname:'Provinceid',
52. Editable:False,
54. Triggeraction:'All',
56. Allowblank:True,
58. Fieldlabel:'Select a province',
60. Name:'Provinceid',
62. Width: 80
66. });
70.  VaRCombocities =NewExt. Form. ComboBox ({
72. Store:NewExt. Data. simplestore ({
74. Fields :["Cityid",'Cityname'],
76. Data: []
78. }),
82. Valuefield:"Cityid",
84. Displayfield:"Cityname",
86. Mode:'Local',
88. Forceselection:True,
90. Blanktext:'Select region',
92. Emptytext:'Select region',
94. Hiddenname:'Cityid',
96. Editable:False,
98. Triggeraction:'All',
100. Allowblank:True,
102. Fieldlabel:'Select region',
104. Name:'Cityid',
106. Width: 80
108. });

 

VaR provinces = [[1, 'beijing'], [2, 'shanghai']; var cities = new array (); Cities [1] = [11, 'haidian '], [22, 'dongcheng']; cities [2] = [[33, 'whampoa '], [44, 'pudong'], [55, 'Security ']; var comboprovinces = new Ext. form. comboBox ({store: New Ext. data. simplestore ({fields: ["provinceid", "provincename"], data: provinces}), listeners: {select: function (combo, record, index) {combocities. clearvalue (); combocities. store. loaddata (cities [record. data. provinceid]) ;}}, valuefield: "provinceid", displayfield: "provincename", mode: 'local', forceselection: True, blanktext: 'select a province ', emptytext: 'select a province ', hiddenname: 'cmdid', Editable: false, triggeraction: 'all', allowblank: True, fieldlabel: 'select a province', name: 'cmdid ', width: 80}); var combocities = new Ext. form. comboBox ({store: New Ext. data. simplestore ({fields: ["cityid", 'cityname'], data: []}), valuefield: "cityid", displayfield: "cityname", mode: 'local ', forceselection: True, blanktext: 'select region', emptytext: 'select region', hiddenname: 'cityid', Editable: false, triggeraction: 'all', allowblank: True, fieldlabel: 'select region', name: 'cityid', width: 80 });

Do not set the ID of the ComboBox control to the same as that of the hiddenname control. Otherwise, the system selects no option and does not know if it is a bug of ComboBox.