[ExtJS]设置级联菜单的默认值

前言

　　 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).　　很容易又会犯触发菜单一就直接给菜单二赋值的错，注意这里因为菜单二还没有加载完，所有如果直接在触发事件后面写赋值，出来仍然是数字。

　　　　　　2.2.3　　最终效果图

　　　　　　　　


　　四、代码下载

　　　　/Files/over140/2010/6/combox2010-6-12.rar

　　五、维护

　　　　5.1　　2010-6-13

　　　　　　此文对本文的问题有所启发：http://hi.baidu.com/pure_adoration/blog/item/7146f0264608730a908f9d5d.html

　　六、转载保留

　　　　博客园：http://www.cnblogs.com/

　　　　　　农民伯伯：http://over140.cnblogs.com/

结束

　　注意代码中的如PageBase、 ComboBox('combo2','二 级菜单',store2)之类的代码可以在我以前的文章里面找得到说明。遇到问题除了抱怨还可以选择消灭，那种解决后的快感是非常深刻的，这个问题很早就解决了，一直没时间写，现在仍然记得清晰 :)