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.addClass始终无效原因分析
Sep 08 Javascript
多个$(document).ready()的执行顺序实例分析
Jul 26 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
Js的Array数组对象详解
Feb 22 Javascript
基于jQuery实现火焰灯效果导航菜单
Jan 04 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
微信小程序实现多张图片上传功能
Nov 18 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
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程序占用多少内存(memory_get_usage)
2012/09/23 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
解析获取优酷视频真实下载地址的PHP源代码
2013/06/26 PHP
PHP上传文件时自动分配路径的方法
2015/01/09 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
POST一个JSON格式的数据给Restful服务实例详解
2017/04/07 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
PHP实现的curl批量请求操作示例
2018/06/06 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
Javascript 对象的解释
2008/11/24 Javascript
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JS 去除Array中的null值示例代码
2013/11/20 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
Angular resolve基础用法详解
2018/10/03 Javascript
Vue核心概念Action的总结
2019/01/18 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[45:56]Ti4正赛第一天 VG vs NEWBEE 3
2014/07/19 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
卡塔尔航空官方网站:Qatar Airways
2017/02/08 全球购物
美国医疗用品、医疗设备和家庭保健用品商店:Medical Supply Depot
2018/07/08 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
中职生自荐信
2013/10/13 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书
python 遍历磁盘目录的三种方法
2021/04/02 Python