ExtJS 연결 메뉴 의 기본 값 설정

앞에서 말 했 듯 이 ExtJS 는 이러한 페이지 에 값 을 부여 하 는 것 이 매우 편리 하 다.본문 에서 1.2.1 코드 에서 볼 수 있 듯 이 한 줄 의 코드 로 해결 할 수 있 지만 이것 은 일반 컨트롤 에 있어 텍스트 상자 와 같다.ComboBox 는 쉽 지 않 은 데...버 전 Ext JS Library 3.0.0 본문 1,문제 1.1 캡 처1.2 코드 1.2.1 전단 코드

 
<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 = 'side'; 

var store1 = ExtStore('combox.aspx?method=GetProvinces'); 
var store2 = ExtStore('combox.aspx?method=GetCitys'); 

var combo2 = ComboBox('combo2','    ',store2); 
var combo1 = new Ext.form.ComboBox({ 
mode: 'remote', 
fieldLabel:'    ', 
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) 
{ 
//         
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();">    </center>', 
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;', 
//         
labelAlign: 'right', 
//      
labelWidth: 170, 
//          
buttonAlign:'center', 
//         
defaults:{ width:180 }, 
items: [ 
combo1, 
combo2 
] 
}); 

//     
Ext.Ajax.request({ 
url: 'combox.aspx?method=Detail', 
method: 'GET', 
callback: function (options, success, response) { 
if(success && response.status == 200){ 
//       
form1.form.setValues(Ext.util.JSON.decode(response.responseText)) 
} 
} 
}); 
}); 
</script> 

1.2.2 배경 코드

 
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 = "   " }); 
Provinces.Add(new Combox() { Id = 2, Name = "   " }); 

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

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

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

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

protected void Page_Load(object sender, EventArgs e) 
{ 

} 

/// <summary> 
///          
/// </summary> 
/// <returns></returns> 
public void GetProvinces() 
{ 
Response.Write(new StringBuilder().Append("{count:") 
.Append(Provinces.Count) 
.Append(",result:") 
.Append(JavaScriptConvert.SerializeObject(Provinces)) 
.Append('}') 
.ToString()); 
} 

/// <summary> 
///            
/// </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 코드 설명 1.3.1 배경 코드 에서 사용 하 는 데 이 터 는 테스트 용 1.3.2 의도 로 만 불 러 올 때광 둥 성-주 하 이 시 2,문제 분석 ComboBox 지연 로드 로 인 한.3.해결 방법 2.1 ComboBox 에 값 을 부여 한 후에 대응 하 는 Name 을 표시 합 니 다.Id 가 Ext.ajax.request 를 실행 하기 전에'store 1.load()'를 추가 하 는 것 이 아 닙 니 다.됐다.4.567916.2.2 ComboBox 등급 의 연결 부 가 는 이렇게 간단 하지 않 습 니 다.수 동 으로 사건 을 촉발 해 야 합 니 다.여기 서 오 랜 시간 을 시도 해 야 결 과 를 얻 을 수 있 습 니 다.2.2.1 첫 번 째 단 계 는 1 급 메뉴 선택 이 벤트 를 수 동 으로 터치 합 니 다

 
store1.load(); 
//     
Ext.Ajax.request({ 
url: 'combox.aspx?method=Detail', 
method: 'GET', 
callback: function (options, success, response) { 
if(success && response.status == 200){ 
//       
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); 
} 
} 
}); 

수 동 으로 자신 이 record 에 들 어 갈 수 있 는 인 자 를 발 견 했 습 니 다.그렇지 않 으 면 값 이 들 어가 지 않 습 니 다.2.2.2 레벨 연결 수정

 
store2.load({ 
callback :function(r,options,success){ 
if(success){ 
if(IsLoad) 
{ 
combo2.setValue(comboValue2); 
IsLoad = false; 
} 
} 
} 
}); 

코드 설명:a).IsLoad 는 전역 변수 로 기본 값 b 를 한 번 만 설정 하 는 것 을 제어 합 니 다.트리거 메뉴 가 메뉴 에 직접 값 을 부여 하 는 오 류 를 범 하기 쉽 습 니 다.메뉴 2 가 아직 불 러 오지 않 았 기 때 문 입 니 다.트리거 이벤트 뒤에 직접 할당 값 을 쓰 면 나 오 는 것 은 숫자 입 니 다.4.코드 다운로드/201006/yuanma/combox2010-6-12.rar주의 코드 중의 PageBase,ComboBox('combo 2','2 급 메뉴',store 2)와 같은 코드 를 끝내 면 제 이전 글 에서 설명 을 찾 을 수 있 습 니 다.문제 에 부 딪 히 면 불평 외 에 도 없 애 는 것 을 선택 할 수 있다.그 해결 후의 쾌감 은 매우 심각 하 다.이 문 제 는 아주 일찍 해결 되 었 고 쓸 시간 이 없 었 다.지금도 뚜렷하게 기억 하고 있다.)