EXT 二级联动下拉列表

最新推荐文章于 2018-11-13 10:08:23 发布
最新推荐文章于 2018-11-13 10:08:23 发布
阅读量3.3k 收藏
点赞数
分类专栏： ExtJS 2.0 文章标签： ext function stylesheet dropdown firefox string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengkuanghun/article/details/3478277
版权

page.html代码如下

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2.   
  3. <html>  
  4.   
  5. <head>  
  6.   
  7.   <title>省份与城市联动的例子</title>  
  8.   
  9.     <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  10.   
  11.   <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css">  
  12.   
  13.      
  14.   
  15.   <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>  
  16.   
  17.   <script type="text/javascript" src="../../../ext-all.js"></script>  
  18.   
  19.   <script type="text/javascript" src="../../../ext-lang-zh_CN.js"></script>  
  20.   
  21.   <script type="text/javascript" src="city.js"></script>  
  22.   
  23.   <script>  
  24.   
  25. Ext.onReady(function(){   
  26.   
  27.   
  28.   
  29.     重载Grid的排序 applySort   
  30.   
  31.     Ext.data.Store.prototype.applySort = function(){ //重载 applySort   
  32.   
  33.         if(this.sortInfo && !this.remoteSort){   
  34.   
  35.             var s = this.sortInfo, f = s.field;   
  36.   
  37.             var st = this.fields.get(f).sortType;   
  38.   
  39.             var fn = function(r1, r2){   
  40.   
  41.               var v1 = st(r1.data[f]), v2 = st(r2.data[f]);   
  42.   
  43.                 // 添加:修复汉字排序异常的Bug   
  44.   
  45.                if(typeof(v1) == "string"){ //若为字符串，   
  46.   
  47.                  return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持   
  48.   
  49.                }   
  50.   
  51.               return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);   
  52.   
  53.             };   
  54.   
  55.             this.data.sort(s.direction, fn);   
  56.   
  57.             if(this.snapshot && this.snapshot != this.data){   
  58.   
  59.                 this.snapshot.sort(s.direction, fn);   
  60.   
  61.             }   
  62.   
  63.         }   
  64.   
  65.     };   
  66.   
  67.   
  68.   
  69.        
  70.   
  71.     var provinceComBo=new Ext.form.ComboBox({   
  72.   
  73.         hiddenName:'province',   
  74.   
  75.         name: 'province_name',   
  76.   
  77.         valueField:"province",   
  78.   
  79.         displayField:"province",   
  80.   
  81.         mode:'local',   
  82.   
  83.         fieldLabel: '所在省份',   
  84.   
  85.         blankText:'请选择省份',   
  86.   
  87.         emptyText:'请选择省份',   
  88.   
  89.         editable:false,   
  90.   
  91.         anchor:'90%',   
  92.   
  93.         forceSelection:true,   
  94.   
  95.         triggerAction:'all',   
  96.   
  97.         store:new Ext.data.SimpleStore(   
  98.   
  99.             {   
  100.   
  101.                 fields: ["province","city"],   
  102.   
  103.                 data:citys,   
  104.   
  105.                 sortInfo:{field:'province'}   
  106.   
  107.             }   
  108.   
  109.         ),   
  110.   
  111.         listeners:{   
  112.   
  113.             select:function(combo, record, index){   
  114.   
  115.             /*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )   
  116.   
  117.             Fires when a list item is selected   
  118.   
  119.             Listeners will be called with the following arguments:   
  120.   
  121.                
  122.   
  123.                 * combo : Ext.form.ComboBox   
  124.   
  125.                   This combo box   
  126.   
  127.                 * record : Ext.data.Record   
  128.   
  129.                   The data record returned from the underlying store   
  130.   
  131.                 * index : Number   
  132.   
  133.                   The index of the selected item in the dropdown list   
  134.   
  135.                
  136.   
  137.             */   
  138.   
  139.                 cityCombo.clearValue();   
  140.   
  141.                 cityCombo.store.loadData(record.data.city);   
  142.   
  143.             }   
  144.   
  145.         },   
  146.   
  147.         applyTo: 'provinceComBo'   
  148.   
  149.     })   
  150.   
  151.   
  152.   
  153.     var cityCombo=new Ext.form.ComboBox({   
  154.   
  155.         hiddenName:'city',   
  156.   
  157.         name:'city_name',   
  158.   
  159.         valueField:"city",   
  160.   
  161.         displayField:"city",   
  162.   
  163.         mode:'local',   
  164.   
  165.         fieldLabel: '所在城市',   
  166.   
  167.         blankText:'请选择城市',   
  168.   
  169.         emptyText:'请选择城市',    
  170.   
  171.         editable:false,   
  172.   
  173.         anchor:'90%',   
  174.   
  175.         forceSelection:true,   
  176.   
  177.         triggerAction:'all',   
  178.   
  179.         store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}),   
  180.   
  181.         applyTo: 'cityCombo'   
  182.   
  183.     });   
  184.   
  185.        
  186.   
  187. })   
  188.   
  189.   
  190.   
  191.   </script>  
  192.   
  193. </head>  
  194.   
  195. <body>  
  196.   
  197. <input type="text" id="provinceComBo" size="20"/><input type="text" id="cityCombo" size="20"/>  
  198.   
  199. </body>  
  200.   
  201. </html>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

  <title>省份与城市联动的例子</title>

	<meta http-equiv="content-type" content="text/html; charset=utf-8">

  <link rel="stylesheet" type="text/css" href="../../../resources/css/ext-all.css">

  

  <script type="text/javascript" src="../../../adapter/ext/ext-base.js"></script>

  <script type="text/javascript" src="../../../ext-all.js"></script>

  <script type="text/javascript" src="../../../ext-lang-zh_CN.js"></script>

  <script type="text/javascript" src="city.js"></script>

  <script>

Ext.onReady(function(){



	重载Grid的排序 applySort

	Ext.data.Store.prototype.applySort = function(){ //重载 applySort

		if(this.sortInfo && !this.remoteSort){

			var s = this.sortInfo, f = s.field;

			var st = this.fields.get(f).sortType;

			var fn = function(r1, r2){

			  var v1 = st(r1.data[f]), v2 = st(r2.data[f]);

				// 添加:修复汉字排序异常的Bug

			   if(typeof(v1) == "string"){ //若为字符串，

				 return v1.localeCompare(v2);//则用 localeCompare 比较汉字字符串, Firefox 与 IE 均支持

			   }

			  return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);

			};

			this.data.sort(s.direction, fn);

			if(this.snapshot && this.snapshot != this.data){

				this.snapshot.sort(s.direction, fn);

			}

		}

	};



	

	var provinceComBo=new Ext.form.ComboBox({

		hiddenName:'province',

		name: 'province_name',

		valueField:"province",

		displayField:"province",

		mode:'local',

		fieldLabel: '所在省份',

		blankText:'请选择省份',

		emptyText:'请选择省份',

		editable:false,

		anchor:'90%',

		forceSelection:true,

		triggerAction:'all',

		store:new Ext.data.SimpleStore(

			{

				fields: ["province","city"],

				data:citys,

				sortInfo:{field:'province'}

			}

		),

		listeners:{

			select:function(combo, record, index){

			/*select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )

			Fires when a list item is selected

			Listeners will be called with the following arguments:

			

				* combo : Ext.form.ComboBox

				  This combo box

				* record : Ext.data.Record

				  The data record returned from the underlying store

				* index : Number

				  The index of the selected item in the dropdown list

			

			*/

				cityCombo.clearValue();

				cityCombo.store.loadData(record.data.city);

			}

		},

        applyTo: 'provinceComBo'

	})



	var cityCombo=new Ext.form.ComboBox({

		hiddenName:'city',

		name:'city_name',

		valueField:"city",

		displayField:"city",

		mode:'local',

		fieldLabel: '所在城市',

		blankText:'请选择城市',

		emptyText:'请选择城市', 

		editable:false,

		anchor:'90%',

		forceSelection:true,

		triggerAction:'all',

		store:new Ext.data.SimpleStore({fields: ["city"],data:[],sortInfo:{field:'city'}}),

        applyTo: 'cityCombo'

	});

	

})



  </script>

</head>

<body>

<input type="text" id="provinceComBo" size="20"/><input type="text" id="cityCombo" size="20"/>

</body>

</html>
 
  1. city.js的代码  
city.js的代码
 
  1. <PRE class=jscript name="code">var citys=[   
  2.   
  3. ['北京',[['北京'],['通县'],['昌平'],['大兴'],['密云'],['延庆'], ['顺义'],['怀柔'],['平谷'],['石景山'],['朝阳'],['西城'],['东城'],['丰台'],['宣武'],['崇文'], ['海淀']]],   
  4.   
  5. ['上海',[['上海县'],['嘉定'],['松江'],['南汇'],['奉贤'],['川沙'],['青浦'],['崇明'],['金山']]],   
  6.   
  7. ['天津',[['蓟县'],['宝坻'],['武清'],['静海'],['宁河']]]]</PRE> 
fengkuanghun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ext二级联动完整例子
10-19
在"Ext二级联动完整例子"项目中，我们可以预见到以下关键知识点： 1. **ExtJS组件**：主要涉及`Ext.form.field.ComboBox`，它是实现联动效果的核心组件。ComboBox提供了一个可搜索、可下拉选择的输入框，支持配置...
下拉列表的二级联动（ExtJs）
nerveboy学习笔记
03-08 1714
//下面的方法是创建一个下拉列表的二级联动组件，并扔到原先的面板中expansion : function(cfg){ var typeCombStore = new Ext.data.JsonStore({     //一级列表数据 fields : ['value', 'text'], data : [{ 'value' : 1, 'text' : '一类...
Extjs combox从后台请求数据实现二级联动
diaosongshu3398的博客
07-07 164
写在前面，自研究生找到这份工作，开始自学java web，零零碎碎花了半年的时间，web开发的知识体系基本算是过了一遍，包括ssh框架，但之前都是零碎的实现，前端就只练习前端，后端只练习后端，前后端的是怎么交互的，理论上知道那么回事，可是从来没用过，趁着实习及试用期时间，学习了下Extjs，把extjs的相关知识结合起来，写了这么个demo： 踩到的坑： 　　后代去数据库查询的结果为...
ExtJs combo的二级联动
tansitongba
03-03 226
二级联动主要是监听一级下拉框的取值，然后将该值作为二级下拉框请求数据时参数。下拉框和其对应的数据源都进行单独定义，如下： // 商品类型 var goodsTypeStore = new Ext.data.Store({ url: "goodsTypeAction!listGoodsType.action", reader: new Ext.data.JsonReader({ idP...
Extjs二级联动
qq_16557323的博客
02-17 297
var liveweatherNameData = null; DWREngine.setAsync(false);  sfileMgrService.findLiveWeatherNameDate(function(data){ liveweatherNameData =  data; }); DWREngine.setAsync(true); var liveweatherName
Ext下拉列表树
05-18
Ext下拉列表树是一种在ExtJS框架中实现的组件，它结合了下拉列表和树形结构的功能，为用户提供了一种交互式的、层次化的选择项。这种组件在数据管理、菜单选择、分类筛选等场景中非常常见，尤其适用于需要展现多级...
ExtJS Combobox二级联动列子
01-10
下面我们将详细讨论如何在ExtJS中实现Combobox的二级联动。 一、基础概念 1. Combobox：ExtJS中的Combobox是FormPanel的一个字段，它结合了文本输入框和下拉列表，提供了一种选择或输入数据的方式。 2. 二级联动：...
Ext中下拉列表ComboBox组件store数据格式用法介绍
12-11
代码如下: var p_years = new Ext.form.ComboBox( { fieldLabel : ‘统计年份’, anchor : anchor_w, mode : ‘remote’, maxHeight:100, triggerAction : ‘all’, selectOnFocus : true, forceSelection : true, ...
ext combobox二级联动
08-20
ext,ext combobox,ext二级联动，ext combobox二级联动 ___本人的原则:上传好东西,但绝不便宜.因为自己的心血 ext combobox二级联动,ext ,ext combobox,combobox,combobox二级联动,ext 二级联动 groupCombo.on('...
Extjs 轻松实现下拉框联动
09-25
最近小弟做了Extjs实现实现下拉框联动的效果，参考了好久才学会，闲下来发一个简单的例子。。呵呵
extjs 下拉框 多级联动
Java小白的博客
09-20 6904
extjs 下拉框 多级联动
Extjs 二级联动
小二来一只葫芦
10-20 1222
1级下拉框   后台回去参数 new Ext.FormPanel的1级下拉框 最后面需要跟上这么一句话 二级菜单及store参数   在js最上面设置全局变量 new Ext.FormPanel的2级下拉框 设置2级联动(意思是点击1级菜单2级菜单开始加载数据，通过URL传递wbjjc参数到后台) 后台处理代码 根据
Ext二级联动下拉框
lixying的博客
09-09 162
[code="js"] combobox的二级联动实现：  { xtype : 'combo', id : 'combo1', emptyText : '请选择...', typeAhead : true, triggerAction : 'all', lazyRender : true, mode : 'local', store : store1, valueField...
Extjs之Combobox两级联动使用
在0和1的思考中成长
01-30 9373
Ext.onReady(function(){ //性别store var sexStore = Ext.create('Ext.data.Store', { fields: ['code', 'name'], data : [ {"code":"0", "name":"female"}, {"code":"1", "name
ext.js(2.2)实现两级级联
天涯的博客
11-13 655
最近使用ext.js插件实现级联查询，但是项目使用的版本较低。导致了很多不必要的问题，特记录在此 以便以后需要。 以下代码是在高版本下实现 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link href="https://cdn.bootcss.c...
关于extjs的下拉框二级联动
fight_cat的博客
04-13 1324
最近新接触的extjs，需要写下拉框，实现城市与所在街道的联动。用了两种方法。一种是应用filterBy方法 ，另一种是应用store的proxy直接查找。数据量大的时候使用第二种方法。
extjs 级联下拉菜单
u013093822的专栏
03-07 2736
现在要实现的目标是根据能耗类型的选择，使下一个下拉菜单网关名称根据选择的能耗类型来筛选，例如我选择能耗类型为“电能表”，那我的网关名称的下拉菜单中的选项中只出现电能表的有关网关名称，如图： 现在我的网关名称“7#青表”就是电能表的网关名称，如果我选择的能耗类型是水表，则网关名称显示的就是对应水表的网关名称 下面介绍js代码： 首先定义一个数组var gateWayStore
ExtJS4.2实例：表格（Grid）含联动的下拉列表（Combobox）
最新发布
06-09
好的，我会尝试回答你的问题。以下是一个 ExtJS4.2 实例，包含一个表格和一个带有联动下拉列表的列： ```javascript Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.form.*' ]); Ext.onReady(function() { // 创建一个简单的数据存储 var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone', 'department'], data: [ { 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224", "department": "Sales" }, { 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234", "department": "Marketing" }, { 'name': 'Homer', "email":"homer@simpsons.com", "phone":"555-222-1244", "department": "Engineering" }, { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", "department": "Support" } ] }); // 创建一个下拉框的存储 var departmentStore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ { "name": "Sales" }, { "name": "Marketing" }, { "name": "Engineering" }, { "name": "Support" } ] }); // 创建一个表格 var grid = Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: store, height: 250, width: 500, title: 'Employee Directory', columns: [ { header: 'Name', dataIndex: 'name' }, { header: 'Email', dataIndex: 'email', flex: 1 }, { header: 'Phone', dataIndex: 'phone' }, // 创建一个带有联动下拉列表的列 { header: 'Department', dataIndex: 'department', editor: { xtype: 'combobox', store: departmentStore, displayField: 'name', valueField: 'name', editable: false, forceSelection: true } } ], // 启用编辑功能 plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ] }); }); ``` 这个例子中，我们创建了一个名为 `grid` 的表格，包含四个列：姓名、电子邮件、电话和部门。其中，部门列是一个带有联动下拉列表的列，该下拉列表的数据存储在 `departmentStore` 中。我们使用 `Ext.grid.plugin.CellEditing` 插件启用了编辑功能，从而允许用户编辑表格中的数据。 希望这个例子对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值