Home > Article > Web Front-end > ExtJS sets the default value of cascading menu_extjs

ExtJS sets the default value of cascading menu_extjs

WBOYOriginal: 2016-05-16 18:25:03874browse

Preface
ExtJS is very convenient for assigning values in modifying such a page. As can be seen from the 1.2.1 code in the text, it can be done with one line of code, but this is for ordinary controls, such as text boxes. It’s not that simple for ComboBox...

Version
Ext JS Library 3.0.0

Text
1. Problems
1.1 Screenshots
🎜> 1.2 Code ExtJS sets the default value of cascading menu_extjs 1.2.1 Front-end code

Copy code The code is as follows:

Copy code

The code is as follows:

 
static IList Provinces = new List(); 
static IDictionary Citys = new Dictionary(); 

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) 
{ 

} 

///  
/// Get all province data
///  
///   
public void GetProvinces() 
{ 
Response.Write(new StringBuilder().Append("{count:") 
.Append(Provinces.Count) 
 .Append(",result:") 
.Append(JavaScriptConvert.SerializeObject(Provinces)) 
.Append('}') 
.ToString()); 
} 

///  
/// Get city data below the province
///  
///  
 public void GetCitys() 
{ 
IList result = new List(); 
int Province = Convert.ToInt32(Request.QueryString["Province"]); 
foreach (KeyValuePair 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 result = new Dictionary(); 
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 for testing
1.3.2 Intent: loaded Guangdong Province - Zhuhai City is selected by default

2. Problem Analysis

Caused by delayed loading of ComboBox.

3. Solution
2.1 Let the ComboBox display the corresponding Name after assignment, instead of the Id
Just add "store1.load();" before Ext.Ajax.request is executed.
ExtJS sets the default value of cascading menu_extjs

ExtJS sets the default value of cascading menu_extjs

2.2 ComboBox cascading assignment
Cascading assignment is not that simple. You need to manually trigger events. It took a long time to get the result.
　　2.2.1 The first step is to manually trigger the first-level menu selection event

Copy the code The 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 here that the manual trigger requires the parameters of the record to be passed in, otherwise the value will not be found.
　　2.2.2 Modify cascade

Copy code The 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 the default value to be set only once
b). It is easy to make the mistake of triggering menu one and assigning a value directly to menu two. Pay attention here Because menu two has not been loaded yet, if you write the assignment directly after the trigger event, it will still be a number.

IV. Code download
/201006/yuanma/combox2010-6-12.rar
End

Pay attention to the code such as PageBase, ComboBox( Codes such as 'combo2', 'secondary menu', store2) can be found in my previous articles. When you encounter a problem, besides complaining, you can also choose to eliminate it. The pleasure after solving it is very profound. This problem was solved very early and I never had time to write about it. I still remember it clearly :)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js parseInt("08") does not specify the carry system_javascript skillsNext article：js parseInt("08") does not specify the carry system_javascript skills

See more

ExtJS sets the default value of cascading menu_extjs

Related articles