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 animate 动画效果使用说明
Nov 04 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
js识别uc浏览器的代码
Nov 06 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
微信小程序实现评论功能
Nov 28 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 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
php 获取客户端的真实ip
2009/11/30 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
浅谈ElementUI中switch回调函数change的参数问题
2018/08/24 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
Python3获取cookie常用三种方案
2020/10/05 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
python制作抽奖程序代码详解
2021/01/15 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
学生就业推荐信
2013/11/13 职场文书
招商专员岗位职责
2014/02/08 职场文书
超市收银员岗位职责
2015/04/07 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python实现监听键盘
2021/04/26 Python
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS