ExtJS 设置级联菜单的默认值


Posted in Javascript onJune 13, 2010

前言

ExtJS在修改这样的页面上赋值是很方便的,在正文中1.2.1代码中可以看出,一行代码就可以搞定,但这是对于普通控件而言,如文本框。对于ComboBox可没这么简单...

版本

Ext JS Library 3.0.0

正文

一、问题

1.1

截图

ExtJS 设置级联菜单的默认值

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();”即可。

ExtJS 设置级联菜单的默认值

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 相关文章推荐
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
详细分析JS函数去抖和节流
Dec 05 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
js 未结束的字符串常量错误解决方法
Jun 13 #Javascript
JSON 和 JavaScript eval使用说明
Jun 13 #Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 #Javascript
js null undefined 空区别说明
Jun 13 #Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 #Javascript
DOM Scripting中的图片切换[兼容Firefox]
Jun 12 #Javascript
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 #Javascript
You might like
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JS的数组迭代方法
2015/02/05 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
微信小程序如何获取用户信息
2018/01/26 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
python并发编程之线程实例解析
2017/12/27 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
pytest中文文档之编写断言
2019/09/12 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Pytorch学习之torch用法----比较操作(Comparison Ops)
2020/06/28 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
车间调度岗位职责
2013/11/30 职场文书
项目经理任命书
2014/06/04 职场文书
学校安全工作汇报材料
2014/08/16 职场文书
2015大一新生军训感言
2015/08/01 职场文书
学生病假条怎么写
2015/08/17 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android
教你一步步实现一个简易promise
2021/11/02 Javascript
MySQL池化框架学习接池自定义
2022/07/23 MySQL
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL