ExtJS sets the default value of the cascade menu

Preface
ExtJS is very convenient to assign values on such pages. It can be seen in the 1.2.1 code in the body that a line of code can be done, but this is for common controls, such as text boxes. It's not that simple for ComboBox...

Version
Ext JS Library 3.0.0

Body
I. Problems
1.1
　　　　　　
Code 1.2
1.2.1 front-end codeCopy codeThe Code is as follows: <script type = "text/javascript">
//
Function ExtStore (url)
{
Return new Ext. data. Store ({
Proxy: new Ext. data. HttpProxy ({
Url: url
}),
Reader: new Ext. data. JsonReader ({
TotalProperty: 'Count ',
Root: 'result'
},
[
{Name: 'id '},
{Name: 'name '}
])
});
}

Ext. onReady (function (){
Ext. QuickTips. init ();
Ext. form. Field. prototype. msgTarget = 'day ';

Var store1 = ExtStore ('combox. aspx? Method = GetProvinces ');
Var store2 = ExtStore ('combox. aspx? Method = GetCitys ');

Var combo2 = ComboBox ('combo2', 'second-level menu ', store2 );
Var combo1 = new Ext. form. ComboBox ({
Mode: 'remote ',
FieldLabel: 'First-level menu ',
Name: 'combo1 ',
Editable: false,
TypeAhead: true,
TriggerAction: 'all ',
DisplayField: 'name ',
ValueField: 'id ',
SelectOnFocus: true,
Store: store1,
Listeners :{
'Select': function (combo, record ){
Var id = record. get ('id ');
If (id)
{
// Clear Level 2 menu options
Combo2.setRawValue ('');
Store2.proxy = new Ext. data. HttpProxy ({
Url: String. format ('combox. aspx? Method = GetCitys & Province = {0} ', id)
});
Store2.load ();
}
}
}
});

Var form1 = new Ext. FormPanel ({
Layout: 'form ',
AutoHeight: true,
Frame: true,
RenderTo: Ext. getBody (),
Title: '<center style = "curor: hand" onclick = "window. location. reload ();"> Form Control </center> ',
Style: 'margin-left: auto; margin-right: auto; width: 500px; margin-top: 8px ;',
// Set the label alignment Mode
LabelAlign: 'right ',
// Set the label width
LabelWidth: 170,
// Set the button alignment
ButtonAlign: 'center ',
// Default element property settings
Defaults: {width: 180 },
Items :[
Combo1,
Combo2
]
});

// Load data
Ext. Ajax. request ({
Url: 'combox. aspx? Method = Detail ',
Method: 'get ',
Callback: function (options, success, response ){
If (success & response. status = 200 ){
// Assign values in batches
Form1.form. setValues (Ext. util. JSON. decode (response. responseText ))
}
}
});
});
</Script>

1.2.2 background codeCopy codeThe Code is as follows: static IList <Combox> Provinces = new List <Combox> ();
Static IDictionary <int, Combox> Citys = new Dictionary <int, Combox> ();

Static combox ()
{
Provinces. Add (new Combox () {Id = 1, Name = "Hunan Province "});
Provinces. Add (new Combox () {Id = 2, Name = "Guangdong Province "});

Citys. Add (1, new Combox ()
{
Id = 1,
Name = "Changsha City"
});

Citys. Add (2, new Combox ()
{
Id = 1,
Name = "Yueyang City"
});

Citys. Add (3, new Combox ()
{
Id = 2,
Name = "Shenzhen City"
});

Citys. Add (4, new Combox ()
{
Id = 2,
Name = "Zhuhai City"
});
}

Protected void Page_Load (object sender, EventArgs e)
{

}

/// <Summary>
/// Obtain data from all provinces
/// </Summary>
/// <Returns> </returns>
Public void GetProvinces ()
{
Response. Write (new StringBuilder (). Append ("{count :")
. Append (Provinces. Count)
. Append (", result :")
. Append (JavaScriptConvert. SerializeObject (Provinces ))
. Append ('}')
. ToString ());
}

/// <Summary>
/// Obtain the city data of the saved Area
/// </Summary>
/// <Returns> </returns>
Public void GetCitys ()
{
IList <Combox> result = new List <Combox> ();
Int Province = Convert. ToInt32 (Request. QueryString ["Province"]);
Foreach (KeyValuePair <int, Combox> data in Citys)
{
If (data. Value. Id = Province)
Result. Add (new Combox () {Id = data. Key, Name = data. Value. Name });

}
Response. Write (new StringBuilder (). Append ("{count :")
. Append (result. Count)
. Append (", result :")
. Append (JavaScriptConvert. SerializeObject (result ))
. Append ('}')
. ToString ());
}

Public override string Detail ()
{
IDictionary <string, int> result = new Dictionary <string, int> ();
Result. Add ("combo1", 2 );
Result. Add ("combo2", 2 );
Return JavaScriptConvert. SerializeObject (result );
}

Class Combox
{
Public int Id {get; set ;}
Public string Name {get; set ;}
}

1.3 Code Description
1.3.1 The data used in the background code is only used for testing.
1.3.2 intent: Select Zhuhai City, Guangdong Province by default during loading

Ii. Problem Analysis

ComboBox delayed loading.

Iii. Solution
2.1 assign a value to ComboBox and display the corresponding Name instead of Id.
Add "store1.load ();" before Ext. Ajax. request execution.
　　　　　　
2.2 ComboBox cascade assignment
Cascade assignment is not that easy. You need to manually trigger the event. It takes a long time to get the result.
2.2.1 Step 1: manually trigger the first-level menu selection eventCopy codeThe Code is as follows: store1.load ();
// Load data
Ext. Ajax. request ({
Url: 'combox. aspx? Method = Detail ',
Method: 'get ',
Callback: function (options, success, response ){
If (success & response. status = 200 ){
// Assign values in batches
Form1.form. setValues (Ext. util. JSON. decode (response. responseText ))
Var comboValue1 = combo1.getValue ();
Var selectRecord;
Store1.each (function (record ){
If (record. data. Id = comboValue1)
SelectRecord = record;
});
Combo1.fireEvent ('select', combo1, selectRecord );
}
}
});

It is found that manually triggered parameters must be passed into the record, otherwise the value cannot be obtained.
2.2.2 modify CascadeCopy codeThe Code is as follows: store2.load ({
Callback: function (r, options, success ){
If (success ){
If (IsLoad)
{
Combo2.setValue (comboValue2 );
IsLoad = false;
}
}
}
});

Code Description:
A) IsLoad is a global variable used to control setting the default value only once.
B ). it is easy to make the mistake of assigning a value to menu 2 directly when the trigger menu is one. Note that this is because menu 2 has not been loaded, if all values are directly assigned after the trigger event, it is still a number.

4. Download Code
/201006/yuanma/combox2010-6-12.rar
End

Note that Code such as PageBase, ComboBox ('combo2', 'level 2 menu ', and store2 can be found in my previous articles. In addition to complaints, you can choose to eliminate them. The pleasure of solving the problem is very profound. This problem has been solved for a long time and has no time to write it. I still remember it clearly.