`
gongmingwind
  • 浏览: 588323 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

Ext菜单联动的完美解决方案

    博客分类:
  • Ext
EXT 
阅读更多
情景说明:
省份下拉框和城市下拉框联动:
formpanel编辑的时候使用在
form.getForm().load({
				waitMsg : '正在加载数据',
				waitTitle : '提示',
				url : '/webmaster/admin/userAction.do?method=getUserInfoWithJson',
				method : 'POST',
				success : function(frm, action) {
					// Ext.Msg.alert('提示', '加载成功');
					var pname = action.result.data.provinceName;//省份
					var cname = action.result.data.cityName;//城市
					Ext.getCmp('webmasterprovinceCmp').setRawValue(pname);
					Ext.getCmp('webmastercityCmp').setRawValue(cname);
				},
				failure : function(frm, action) {
					Ext.Msg.alert('提示', '原因如下:' + action.result.errors.info);
				}
			});



省份下拉框代码:
{
											xtype : 'combo',
											store : new Ext.data.Store({
												proxy : new Ext.data.HttpProxy(
														{
															url : '/webmaster/admin/globalAction.do?method=getProvinceList'
														}),
												reader : new Ext.data.JsonReader(
														{
															root : 'rows',
															totalProperty : 'total'
														}, [{
																	name : 'id'
																}, {
																	name : 'name'
																}])
											}),
											displayField : 'name',
											valueField : 'id',
											fieldLabel:'省份',
//											hideLabel : true,
											width : 100,
											editable : false,
											mode : 'remote',
											triggerAction : 'all',
											forceSelection : true,
											typeAhead : true,
											name : 'provinceID',
											id:'webmasterprovinceCmp',
											hiddenName : 'provinceID',
											emptyText : '--请选择省份--',
//											pageSize : 10,
//											disabled : true,
											listeners : {
												'select' : {
													fn : function(combo,
															record, index) {
														Ext.getCmp('webmastercityCmp').change = true;//
														Ext.getCmp('webmastercityCmp').reset();//重置城市
													},
													scope : this
												}
											}
											// allowBlank : false
										}


关键代码:
在省份ComboBox的select事件中,设置城市ComboBox的自定义属性change=true和重置城市ComboBox

城市ComboBox代码:
{
											xtype : 'combo',
											store : new Ext.data.Store({
												proxy : new Ext.data.HttpProxy(
														{
															url : '/webmaster/admin/globalAction.do?method=getCityByProvinceId'
														}),
												reader : new Ext.data.JsonReader(
														{
															root : 'rows',
															totalProperty : 'total'
														}, [{
																	name : 'id'
																}, {
																	name : 'name'
																}])
											}),
											listeners:{
												'beforequery':function(queryEvent){
													var provinceId =  Ext.getCmp('webmasterprovinceCmp').getValue();
													if(provinceId>0&&queryEvent.combo.change){
														var province = Ext.getCmp('webmasterprovinceCmp').getRawValue();
														queryEvent.combo.store.load({params:{provinceName:province}});
														queryEvent.combo.change = false;
													}
													return true;
												}
											},
											change:true,
											displayField : 'name',
											valueField : 'id',
											fieldLabel:'城市',
											width : 100,
											editable : false,
											mode : 'local',
											triggerAction : 'all',
											forceSelection : true,
											typeAhead : true,
											name : 'cityId',
											id:'webmastercityCmp',
											hiddenName : 'cityId',
											valueNotFoundText:'--请选择城市--',
											emptyText : '--请选择城市--'
										}

关键代码:
1、为城市ComboBox添加了一个自定义属性change,用来表示省份是否是改变了。
2、将城市ComboBox的mode=local
3、在城市ComboBox的beforequery事件响应函数中加载数据,并返回true。
分享到:
评论

相关推荐

    Ext动态联动菜单例子

    在用ExtJs+myEclipse6+ssh做项目时需要动态级联菜单功能(就是从数据库中拿数据),因为初次接触Ext,在网上没找到动态联动,只找到了静态联动,于是花了几个小时边学边做终于成功了!需要的兄弟姐妹可以看看,只实现...

    ext布局和菜单设计整理

    ext布局和菜单设计整理

    Ext二级联动完整例子

    9. **调试和测试**:在实际开发过程中,使用浏览器的开发者工具进行调试,检查网络请求、查看DOM结构和JavaScript执行情况,有助于理解联动效果的工作原理并解决可能出现的问题。 总的来说,这个“Ext二级联动完整...

    ext combobox二级联动

    ext,ext combobox,ext二级联动,ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...

    ext3横向菜单

    这个“EXT3横向菜单”可能是指一个专门针对EXT3文件系统的图形用户界面(GUI)工具,它以横向布局展示菜单选项,便于用户管理EXT3文件系统。 在Linux中,文件系统是非常核心的部分,负责组织和存储数据。EXT3因其...

    EXT中COMBOX联动

    "EXT中COMBOBOX联动"指的是在EXTJS应用中,两个或多个COMBOBOX之间实现数据交互和联动效果,即当一个COMBOBOX的选择项改变时,会触发其他COMBOBOX的更新,以展示与当前选择相关联的数据。 EXTJS的COMBOBOX联动通常...

    Ext.net TreePanel的Checkbox操作及父子联动

    在EXT.NET框架中,TreePanel是一个非常重要的组件,它用于展示层次结构的数据,通常用于构建树形目录或层级关系的...记住,EXT.NET提供了一个强大的API,允许开发者对TreePanel的Checkbox操作和父子联动进行高度定制。

    ext带右键菜单的树

    在描述中提到的"ext带右键菜单的树"是指在ExtJS中实现的一种交互功能,即在树形控件上通过右键点击来显示一个上下文菜单。这种功能极大地提高了用户与应用程序的交互性,使得操作更加直观和便捷。 在ExtJS中,树形...

    用Ext 2.0 combobox 做的省份和城市联动选择框的例程

    在本文中,我们将深入探讨如何使用Ext 2.0的ComboBox组件实现省份和城市联动选择框的功能。Ext是一个强大的JavaScript库,它提供了丰富的用户界面组件,包括ComboBox,用于创建下拉选择框。在这个例程中,我们将看到...

    EXT一些小问题的解决方案

    包含一些EXT平时使用中常遇到的问题,以及解决方案

    extjs的ComboBox 2级联动

    在Web应用程序中,我们经常需要实现二级联动效果,即一个ComboBox的选择会影响另一个ComboBox的显示内容。这在数据关联和筛选场景中尤为常见,例如省份和城市的关联选择。本文将深入探讨如何在ExtJS中实现ComboBox的...

    ext 下拉菜单。(不要下,不能用)

    在EXT JS库中,下拉菜单(Dropdown Menu)是一种常见的组件,用于提供多个选项供用户选择。EXT JS是一个强大的JavaScript库,专为构建富...同时,EXT JS社区和官方文档是很好的参考资料,可以提供帮助和解决方案。

    Ext级联菜单实例

    阅读《Ext级联菜单.docx》文档可能会提供更多关于如何配置和定制ExtJS级联菜单的细节,包括但不限于样式调整、动态加载子菜单、自定义事件处理等。对于初学者来说,理解和掌握这些基本概念是至关重要的,因为它们将...

    多款多级联动下拉菜单打包!必有一款适合你!

    5. **ext.rar**:EXT.js是一个流行的JavaScript库,用于构建富客户端应用,这个rar文件可能包含EXT.js框架下的多级联动下拉菜单组件。 6. **MultilevelSelect-5265.rar**:"MultilevelSelect"直译为多级选择,这...

    Ext 两种树形菜单

    在给定的标题“Ext 两种树形菜单”中,我们可以推测这是一个关于使用Ext JS框架创建两种不同样式或功能的树形菜单的示例。Ext JS是一个强大的JavaScript库,专门用于构建富客户端应用,它提供了丰富的组件和API来...

    如何使用ext写的树形菜单

    在EXT中,实现树形菜单主要依赖于`Ext.tree.Panel`组件,这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素,通常用于表示文件系统、组织结构或导航菜单。在EXT中,`...

    用Ext实现报表中的核心问题解决方案

    ### 用Ext实现报表中的核心问题解决方案 在现代软件开发中,报表的可视化展示是非常重要的一个环节,它能够帮助用户直观地理解数据背后的含义。本文将深入探讨如何使用Ext JS框架来解决报表制作过程中的核心问题,...

    Ext树形菜单(我自己做的)

    在给定的标题“Ext树形菜单(我自己做的)”中,我们可以推断出这个压缩包包含了一个由开发者自定义的ExtJS树形菜单组件。树形菜单是用户界面中常用的一种元素,它用于展示层次结构的数据,比如文件系统、组织结构或...

    完美权限解决方案1

    总的来说,“完美权限解决方案1”提供了一种灵活且强大的权限管理系统,它结合了Spring Security的后台控制和EXT3的前端展示,实现了从URL到功能菜单的全面权限管理。通过这样的方案,开发人员可以轻松地定制权限...

    Ext官方中文教程(可打包下载)

    入门 EXT简介 Ext 2简述 EXT新手建议 怎么轻松地进入Ext的世界? 从零开始Ext 设置基础页 Javascript中的作用域(scope)是什么?(一) ...Ext 2联动Combos的教程 采用JsonStore的PropertyGrid 关联事件

Global site tag (gtag.js) - Google Analytics