`
lluyunl
  • 浏览: 3463 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

ExtJS4.2 二级下拉框联动

阅读更多
图片

 	//定义学历下拉框模型
	Ext.define('comModel', {
		extend : 'Ext.data.Model',
		fields : [
			{name : "code", type : 'String'},
			{name : "value", type : 'String'}
		]
	});
	//定义一级下拉框数据源
	var depStore = Ext.create('Ext.data.Store', {
		model : 'comModel',
		autoLoad : false,
		proxy : {
			type : 'ajax',
			url : 'employee_getCom.action?type=2',
			reader : {
				type : 'json',
				root : 'com_data'  //接收后台返回数据
			}
		}
	});
	//定义二级下拉框数据源
	var posStore = Ext.create('Ext.data.Store', {
		model : 'comModel',
		autoLoad : false,
		proxy : {
			type : 'ajax',
			url : 'employee_getCom.action?type=3',
			reader : {
				type : 'json',
				root : 'com_data'  //接收后台返回数据
			}
		}
	});
 

 

//创建表单
	var gform = Ext.create('Ext.form.Panel', {
		layout : 'form',
		width : 500,
		height : 800,
		frame : true,
		labelAlign : 'right',
		reader : reader,
		items : [{
			layout : 'column',
			baseCls : 'my-panel-no-border',
			items:[{
				columnWidth : .48,
				layout : 'form',
				baseCls : 'my-panel-no-border',
	        	items  : [{
	        		labelWidth : 50,
	        		name : 'department',
	        		id : 'department',
	        		store : depStore,
	        		mode : 'local',
	        		xtype : 'combo',
	        		fieldLabel:'部门',
	        		labelAlign : 'right',
	        		valueField : 'code',
	        		displayField : 'value',
	        		emptyText:'--请选择--',
	    			selectOnFocus:true,
	    			forceSelection : true,
	    			allowBlank : false,
	    			triggerAction: 'all',
	    			listeners : {
	    				select : function(combo, record, index) {
	    					posStore.on('beforeload', function(store, options){
								var new_params = {  //传参,获取二级下拉框数据
									depId : combo.value,
									t : 3
								};
								Ext.apply(posStore.proxy.extraParams, new_params);
							});
							posStore.load();
	    					
	    				}
	    			}
	        	}]
	        },{
	        	columnWidth : .48,
				layout : 'form',
				baseCls : 'my-panel-no-border',
	        	items  : [{
	        		labelWidth : 50,
	        		name : 'post',
	        		id : 'post',
	        		store : posStore,
	        		mode : 'local',
	        		xtype : 'combo',
	        		fieldLabel:'岗位',
	        		labelAlign : 'right',
	        		valueField : 'code',
	        		displayField : 'value',
	        		emptyText:'--请选择--',
	    			selectOnFocus:true,
	    			forceSelection : true,
	    			allowBlank : false,
	    			triggerAction: 'all'
	        	}]
	        }]
	});

 

  • 大小: 4 KB
分享到:
评论

相关推荐

    Extjs 轻松实现下拉框联动

    最近小弟做了Extjs实现实现下拉框联动的效果,参考了好久才学会,闲下来发一个简单的例子。。呵呵

    ExtJs4.2下拉树(修改版)

    ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...

    MVC设计模式实战ExtJS4.2高级组件+SSH2在线投稿系统

    01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...

    修复Extjs4.2 时间下拉框不能选择问题

    Extjs4.2 时间下拉框的 年和月是不可以选择的, 本插件可完美修复, 且在4.2.3上面测试的, 花了几天修复的所以分数高点;

    EXTjs4.2中文版

    EXTjs4.2中文版是EXTjs框架的一个重要版本,EXTjs是一个强大的JavaScript库,专门用于构建用户界面,尤其适用于创建富互联网应用程序(Rich Internet Applications,简称RIA)。它以其组件化的设计理念,丰富的UI...

    SpringMVC+ExtJs4.2实例

    ExtJs4.2则是一款基于JavaScript的富客户端应用框架,它提供了一系列强大的组件,如表格、表单、图表等,用于构建复杂的桌面级Web应用。ExtJs4.2强调MVC模式,将应用划分为Model(数据模型)、View(视图)和...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    ExtJs4.2 下拉框树

    在描述中提到,原生的ExtJs 4.2下拉框在展开时可能会遇到一些问题,比如默认显示根节点、最小高度时无法自动调整高度等。为了解决这些问题,开发者通常需要对源代码进行一些修改。 首先,我们来看`TreePicker.js`这...

    EXTJS4.2学习入门教程

    EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。

    extjs 4.2 开发 参考书

    ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一套完整的组件库,包括数据管理、图表、表格、菜单、工具栏等,使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    Extjs4.2中文教程

    Extjs4.2入门教程详解,及API文档。

    下拉(条件)搜索实例extjs4.2(亲测可用).zip

    在这个“下拉(条件)搜索实例”中,我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面,其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式,用户可以快速...

    基于Extjs 4.2的通用权限管理系统,通用后台模板,EF+MVC+Extjs 4.2

    WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...

    extjs 4.2 多文件上传

    用Ext编写的多文件上传组件,已封装。 支持多文件上传,文件下载,文件删除,

    extjs4.2 desktop mvc

    EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架,它结合了MVC(Model-View-Controller)设计模式,为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库,专门用于创建...

    extjs 4.2 jsb2

    extjs 4.2 jsb2 4.2没有自带jsb2文件

    ExtJs4.2正式版

    ExtJs4.2正式版

Global site tag (gtag.js) - Google Analytics