|
|
ExtJS在修改這樣的頁面上賦值是很方便的，在正文中1.2.1代碼中可以看出，一行代碼就可以搞定，但這是對于普通控件而言，如文本框。對于ComboBox可沒這么簡單...
版本
Ext JS Library 3.0.0
正文
一、問題
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 意圖：加載的時候就默認選擇廣東省――珠海市
二、問題分析
ComboBox延遲加載導致。
三、解決辦法
2.1 讓ComboBox賦值后顯示對應的Name，而不是Id
在Ext.Ajax.request執行前加一句“store1.load();”即可。
2.2 ComboBox級聯賦值
級聯賦值可沒這么簡單了，需要手動觸發事件，這里嘗試了很長時間才出結果。
2.2.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). 很容易又會犯觸發菜單一就直接給菜單二賦值的錯，注意這里因為菜單二還沒有加載完，所有如果直接在觸發事件后面寫賦值，出來仍然是數字。
四、代碼下載
/201006/yuanma/combox2010-6-12.rar
結束
注意代碼中的如PageBase、 ComboBox('combo2','二 級菜單',store2)之類的代碼可以在我以前的文章里面找得到說明。遇到問題除了抱怨還可以選擇消滅，那種解決后的快感是非常深刻的，這個問題很早就解決了，一直沒時間寫，現在仍然記得清晰 :)
JavaScript技術：ExtJS 設置級聯菜單的默認值，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
