EXTjs学习笔记（2）

最新推荐文章于 2019-09-09 16:10:57 发布

原创最新推荐文章于 2019-09-09 16:10:57 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #CSS #JavaScript #数据结构 #HTML #ViewUI

JAVA 专栏收录该内容

52 篇文章

订阅专栏

动起来的Combobox

1. 创建一个html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript" src="js/combobox.js"></script>
</head>
<body>
	ComboBox Test
</body>
</html>

2. 创建生成combobox的js

Ext.onReady(function() {
		   
		  /**具体的数据存储*/
		   var cities=[
		   [1,"西安市"],
		   [2,"咸阳市"] 
		   ];
		   
		   var proxy1=new Ext.data.MemoryProxy(cities);
		   
		   /**对内存记录的数据定义*/
		   var City=Ext.data.Record.create([
		   {name:"cid",type:"int",mapping:0},
		   {name:"cname",type:"string",mapping:1}
		   ]);
		   
		   var reader1=new Ext.data.ArrayReader({},City);
		   
		   /**数据的存储地，是数据和组件的纽带*/
		   var store1=new Ext.data.Store({
			proxy:proxy1,
			reader:reader1,
			autoLoad:true
			});
			
			var combobox=new Ext.form.ComboBox({
				renderTo:Ext.getBody(),
				triggerAction:"all",
				store:store1,
				displayField:"cname",
				valueFeild:"cid",
				mode:"local",
				emptyText:"请选择西安市"
			});
			
			
			 var btn3 = new Ext.Button({
						renderTo : Ext.getBody(),
						text : "获取Combox值",
						width : "200",
						handler: getComValue
					});
					
			function getComValue(){
				        Ext.MessageBox.alert("ComboxValue","实际值是："
				        +combobox.getValue()+"显示值是："+combobox.getRawValue())
				    };
				        
		});

小结：

上面的例子comobox的数据来源于自定义的数组。组件的数据获取分以下步骤：

1. proxy 目的就是分离数据的来源与展现。无论数据时从文件或者远程接口或者自定义都有代理全权负责处理

2. reader 目的是定义数据的结构，让数据规范化是将零散数据规范化的工具，此处定义了数据的格式。

3. store 是对代理和reader的汇聚是与组件直接通信的数据存储。