Ext学习笔记09 - ComboBox，Store

时间  2021-07-14 标签 EXT JavaScript CSS 应用服务器 Dojo

ComboBox

ComboBox是指下拉菜单，在API中找到ComboBox对应的xtype是 combo

应用 Window 布局的笔记中的窗体，其中性别 Gender 这一项选项只有两个(male, female)，可以使用 ComboBox 控件，为Gender 一项加上 xtype，值为 combo

Js代码 复制代码  收藏代码
  1. {   
  2.     fieldLabel:"Gender",   
  3.     xtype:"combo"  
  4. },  
{
	fieldLabel:"Gender",
	xtype:"combo"
},

 
看，已经是一个下拉框的样子了，但是这时Photo中的图片又显示不出来了，还是那个原因，textfield少了一个，需要调整 索引位置。

 

ComboBox使用的过程中是很复杂的，就像Dojo中的ComboBox 和 FilteringSelect，在实际应用中的根据不同的需求，应用起来非常灵活。

 

接下来要为下拉框中赋值，Ext 对于数据存取都封装在了data 中，存储数据分为 GroupingStore，JsonStore 和SimpleStore，在这里使用SimpleStore，它是负责解析数据的数据存储器，通常用来存储数组数据，通过ArrayReader来解析读取数组，看一下ArrayReader在API中的定义

在API提供的示例中给出了ArrayReader存储数组数据的方式，了解了这一点，再来看SimpleStore


SimpleStore中有两个重要的也是最常用的构造参数，Fields 和 Data

  • data：用来存放SimpleStore目标数据，以数组形式存在
  • fields：field对象定义的数组，也可以是field名字的字符串

SimpleStore中定义的数组都是用ArrayReader来读取的，ArrayReader是封装的一个基础工具类，将读取数组这个常用的操作抽取了出来。 

 

ComboBox中两个常用的构造参数 displayField 和 mode： 

 

displayField：

绑定到当前ComboBox中的基础数据的field名字，未定义的默认值为 mode='text' 或 mode='remote'

 

mode：

ComboBox 加载数据的方式，默认从远程服务器加载，如果ComboBox加载本地数据，需要设置 mode='local'。

 

在Gender一项中，只要从本地加载数据就可以了，它的值是确定的，并且不需要修改（如果是需要配置的值或者经常变动的值需要从服务器端加载，但是只有当点击ComboBox向下箭头的时候才会从服务器端发出加载数据请求，这样会产生用户体验的延迟）

 

来看代码：

Js代码 复制代码  收藏代码
  1. {   
  2.     fieldLabel:"Gender",   
  3.     xtype:"combo",   
  4.     /* 显示 data 的 field 名称 */  
  5.     displayField:"gender",   
  6.     /* 从本地加载数据 */  
  7.     mode:"local",   
  8.     readOnly:true,   
  9.     store:new Ext.data.SimpleStore({   
  10.             /* 定义 dataStore 名称 */  
  11.             fields:["gender"],   
  12.             /* 定义 data 内容 */  
  13.             data:[["Male"],["Female"]]   
  14.         })   
  15. },  
{
	fieldLabel:"Gender",
	xtype:"combo",
	/* 显示 data 的 field 名称 */
	displayField:"gender",
	/* 从本地加载数据 */
	mode:"local",
	readOnly:true,
	store:new Ext.data.SimpleStore({
			/* 定义 dataStore 名称 */
			fields:["gender"],
			/* 定义 data 内容 */
			data:[["Male"],["Female"]]
		})
},

 

下拉菜单的效果就出来了：

 

 同样需要设置 readOnly 这个参数，避免用户的误操作。但是这样又出现了一个问题，Ext中的ComboBox提供了一种自动匹配的功能，比如下拉菜单中有一系列数据，我们想找到javaeye这样的选项，当输入字母 j 的时候，下拉列表中会查询出所有以 j 开头的字符串，其他的选项不会显示，也就是说，Gender中只有两项male和female，当选择其中之一之后，另外的选项就不会显示了，而且是readOnly，如果第一次操作用户选错了，希望重选就没有办法操作了，除非刷新页面，这样是不合理的。

 

这种情况下，有另外一个构造参数可以解决这个问题：

当触发下拉动作被**时执行这一操作。默认的参数是“query” 即执行查询来匹配用户输入结果，使用参数“all” 会显示所有的结果。需要在ComboBox定义中加上这一句：

Js代码 复制代码  收藏代码
  1. /* 显示所有结果 */  
  2. triggerAction:"all",   
/* 显示所有结果 */
triggerAction:"all",

 

这样，当选中一个结果之后，再次点击向下箭头，所有的结果都可以被选择。

 

照葫芦画瓢，在 Depart 这一项也把 textfield 换成 comboBox

 

首先Depart这个textfield有点长，我们要把它变的短一些，但是前面在整个 Window 的布局中使用的锚点布局而使 width 这个构造参数失效了，要改变 textfield 的长度还是需要 再使用 锚点 来进行调整

Js代码 复制代码  收藏代码
  1. {   
  2.     fieldLabel:"Depart",   
  3.     anchor:"46.5%"  
  4. }  
{
	fieldLabel:"Depart",
	anchor:"46.5%"
}

 

宽度调整到46.5%以和上面的文本框对齐

 

Js代码 复制代码  收藏代码
  1. {   
  2.     fieldLabel:"Depart",   
  3.     xtype:"combo",   
  4.     anchor:"46.5%",   
  5.     displayField:"depart",   
  6.     mode:"local",   
  7.     triggerAction:"all",   
  8.     store: new Ext.data.SimpleStore({   
  9.             fields:["depart"],   
  10.             data:[["Sale"],["Development"],["Management"],["Other"]]   
  11.         })   
  12. }  
{
	fieldLabel:"Depart",
	xtype:"combo",
	anchor:"46.5%",
	displayField:"depart",
	mode:"local",
	triggerAction:"all",
	store: new Ext.data.SimpleStore({
			fields:["depart"],
			data:[["Sale"],["Development"],["Management"],["Other"]]
		})
}

 

 宽度设置成46.5%，以便和上面的对齐，效果

成功！

 

把 depart 这一项内容加载的事件放到 当窗口show的时候默认显示下拉菜单中的第一个选项：

Js代码 复制代码  收藏代码
  1. showLock:false,        
  2. listeners:{   
  3.     "show":function(_window){   
  4.                 if(!_window["showLock"]){   
  5.                     _window.findByType("textfield")[4].getEl().dom.src = "../../../image/default_pic.gif";   
  6.                     _window["showLock"]=true;                  
  7.                 }   
  8.                    
  9.                 var _depart = _window.findByType("combo")[1];   
  10.                 var _store = _depart.store;   
  11.                 _depart.setValue(_store.getAt(0).get("depart"));   
  12.              }   
  13. },  
showLock:false,		
listeners:{
	"show":function(_window){
				if(!_window["showLock"]){
					_window.findByType("textfield")[4].getEl().dom.src = "../../../image/default_pic.gif";
					_window["showLock"]=true;				
				}
				
				var _depart = _window.findByType("combo")[1];
				var _store = _depart.store;
				_depart.setValue(_store.getAt(0).get("depart"));
			 }
},

 

这样，window 调用 show 方法的时候就会默认显示第一个值了。

 

如果下拉列表里面没有我需要的值怎么办？ 对于这样的需求可以在 Depart 后面跟上一个按钮，允许用户添加所需要的Depart的值，然后填充到Depart中。

 

在一行中左边显示 ComboBox， 右边显示 Button 该怎么办呢？这就需要用到前面说到的列布局，需要小改动一下代码：

Js代码 复制代码  收藏代码
  1. {   
  2.     fieldLabel:"Address",   
  3.     width:"400"  
  4. },{   
  5.     xtype:"panel",   
  6.     layout:"column",   
  7.     baseCls:"x-plaint",   
  8.     items:[{   
  9.         columnWidth:.5,   
  10.         layout:"form",   
  11.         labelWidth:45,   
  12.         baseCls:"x-plaint",   
  13.         items:[{   
  14.             fieldLabel:"Depart",   
  15.             xtype:"combo",   
  16.             anchor:"100%",   
  17.             displayField:"depart",   
  18.             mode:"local",   
  19.             triggerAction:"all",   
  20.             store: new Ext.data.SimpleStore({   
  21.                         fields:["depart"],   
  22.                         data:[["Sale"],["Development"],["Management"],["Other"]]   
  23.                     })   
  24.         }]   
  25.     },{   
  26.         columnWidth:.5,   
  27.         layout:"form",   
  28.         baseCls:"x-plaint",   
  29.         bodyStyle:"padding-left: 10px",   
  30.         items:[{   
  31.             xtype:"button",   
  32.             text:"Add Depart"  
  33.         }]   
  34.     }]   
  35. }  
{
	fieldLabel:"Address",
	width:"400"
},{
	xtype:"panel",
	layout:"column",
	baseCls:"x-plaint",
	items:[{
		columnWidth:.5,
		layout:"form",
		labelWidth:45,
		baseCls:"x-plaint",
		items:[{
			fieldLabel:"Depart",
			xtype:"combo",
			anchor:"100%",
			displayField:"depart",
			mode:"local",
			triggerAction:"all",
			store: new Ext.data.SimpleStore({
						fields:["depart"],
						data:[["Sale"],["Development"],["Management"],["Other"]]
					})
		}]
	},{
		columnWidth:.5,
		layout:"form",
		baseCls:"x-plaint",
		bodyStyle:"padding-left: 10px",
		items:[{
			xtype:"button",
			text:"Add Depart"
		}]
	}]
}

 

效果：

这里面用到的布局和显示的一些参数，参考Ext学习笔记07 - Window及Window中的布局 就可以了， 都是一样一样一样地。

 

这篇有点儿长了，下篇继续吧。 

 

 

这部分的代码：

Js代码 复制代码  收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  5. <title>ComboBox in Window</title>   
  6. <link type="text/css" rel="stylesheet" href="../../../ext/resources/css/ext-all.css">   
  7.   
  8. <script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script>   
  9. <script type="text/javascript" src="../../../ext/ext-all.js"></script>   
  10. <script type="text/javascript" src="../../../ext/build/locale/ext-lang-zh_CN.js"></script>   
  11.   
  12. <script type="text/javascript">   
  13.   
  14.     Ext.onReady(function(){   
  15.         var _window=new Ext.Window({   
  16.             title:"New Person",   
  17.             width:500,   
  18.             height:320,   
  19.             plain:true,   
  20.             layout:"form",   
  21.             defaultType:"textfield",   
  22.             labelWidth:45,   
  23.             bodyStyle:"padding-top: 10px; padding-left:10px;",   
  24.             defaults:{anchor:"95%"},   
  25.             items:[{   
  26.                 xtype:"panel",   
  27.                 baseCls:"x-plain",   
  28.                 layout:"column",   
  29.                 items:[{   
  30.                         columnWidth:.5,   
  31.                         layout:"form",   
  32.                         defaults:{xtype:"textfield", width:170},   
  33.                         labelWidth:45,   
  34.                         baseCls:"x-plain",   
  35.                         /*bodyStyle:"padding-top: 10px; padding-left:10px;",*/  
  36.                         items:[   
  37.                             {fieldLabel:"Name"},   
  38.                             {   
  39.                                 fieldLabel:"Gender",   
  40.                                 xtype:"combo",   
  41.                                 /* 显示 data 的 field 名称 */  
  42.                                 displayField:"gender",   
  43.                                 /* 从本地加载数据 */  
  44.                                 mode:"local",   
  45.                                 /* 显示所有结果 */  
  46.                                 triggerAction:"all",   
  47.                                 readOnly:true,   
  48.                                 store:new Ext.data.SimpleStore({   
  49.                                             /* 定义 dataStore 名称 */  
  50.                                             fields:["gender"],   
  51.                                             /* 定义 data 内容 */  
  52.                                             data:[["Male"],["Female"]]   
  53.                                         })   
  54.                             },   
  55.                             {   
  56.                                 fieldLabel:"Age",   
  57.                                 value:"25",   
  58.                                 readOnly:true  
  59.                             },   
  60.                             {   
  61.                                 xtype:"datefield",   
  62.                                 format:"Y-m-d",   
  63.                                 value:"1984-12-03",   
  64.                                 readOnly:true,   
  65.                                 fieldLabel:"Birth",   
  66.                                 listeners:{   
  67.                                     "blur":function(_df){   
  68.                                         var _age = _df.ownerCt.findByType("textfield")[2];   
  69.                                         _age.setValue(new Date().getFullYear() - _df.getValue().getFullYear());   
  70.                                     }   
  71.                                 }   
  72.                             },   
  73.                             {fieldLabel:"Phone"},   
  74.                             {fieldLabel:"Email"}   
  75.                         ]   
  76.                     },   
  77.                     {   
  78.                         columnWidth:.5,   
  79.                         layout:"form",   
  80.                         style:"padding:10px 10px 0 10px",   
  81.                         labelWidth:45,   
  82.                         baseCls:"x-plain",   
  83.                         items:[   
  84.                             {   
  85.                                 xtype:"textfield",    
  86.                                 inputType:"image",   
  87.                                 width:150,   
  88.                                 height:140,   
  89.                                 fieldLabel:"Photo"  
  90.                             }   
  91.                         ]   
  92.                     }   
  93.                 ]   
  94.             },{   
  95.                 fieldLabel:"ID",   
  96.                 width:"400"  
  97.             },{   
  98.                 fieldLabel:"Address",   
  99.                 width:"400"  
  100.             },{   
  101.                 xtype:"panel",   
  102.                 layout:"column",   
  103.                 baseCls:"x-plaint",   
  104.                 items:[{   
  105.                     columnWidth:.5,   
  106.                     layout:"form",   
  107.                     labelWidth:45,   
  108.                     baseCls:"x-plaint",   
  109.                     items:[{   
  110.                         fieldLabel:"Depart",   
  111.                         xtype:"combo",   
  112.                         anchor:"100%",   
  113.                         displayField:"depart",   
  114.                         mode:"local",   
  115.                         triggerAction:"all",   
  116.                         store: new Ext.data.SimpleStore({   
  117.                                     fields:["depart"],   
  118.                                     data:[["Sale"],["Development"],["Management"],["Other"]]   
  119.                                 })   
  120.                     }]   
  121.                 },{   
  122.                     columnWidth:.5,   
  123.                     layout:"form",   
  124.                     baseCls:"x-plaint",   
  125.                     bodyStyle:"padding-left: 10px",   
  126.                     items:[{   
  127.                         xtype:"button",   
  128.                         text:"Add Depart"  
  129.                     }]   
  130.                 }]   
  131.             }],   
  132.             showLock:false,        
  133.             listeners:{   
  134.                 "show":function(_window){   
  135.                             if(!_window["showLock"]){   
  136.                                 _window.findByType("textfield")[4].getEl().dom.src = "../../../image/default_pic.gif";   
  137.                                 _window["showLock"]=true;                  
  138.                             }   
  139.                                
  140.                             var _depart = _window.findByType("combo")[1];   
  141.                             var _store = _depart.store;   
  142.                             _depart.setValue(_store.getAt(0).get("depart"));   
  143.                          }   
  144.             },   
  145.             buttons:[   
  146.                 {   
  147.                     text:"OK",   
  148.                     handler:function(){   
  149.                         alert(this.ownerCt.buttons[1].text);   
  150.                     }   
  151.                 },   
  152.                 {text:"Cancel"}   
  153.             ]   
  154.         });   
  155.         _window.show();   
  156.     });   
  157.   
  158. </script>   
  159. </head>   
  160. <body>   
  161.   
  162. </body>   
  163. </html>  
联系我们 沪ICP备13005482号-10