ExtJs之数据和ComboBox控件

 

一、如何获取数据

在ExtJs中获取数据主要靠下面四个类： Ext.data.DataProxy、Ext.data.Record、Ext.data.DataReader、Store。下面对这三个类做个简单的介绍。

 

 

DataProxy：获取想要的数据。通过他能得到来自不同地方的数据，如数组、远程服务器，并组织成不同的格式。

 

 

DataReader：定义数据项的逻辑结构，一个数据项有很多列，每列的名称是什么，分别是什么数据类型，都由该类来定义。另外，还负责对不同格式的数据进行读取和解析。在这里用到了Ext.data.Record类来定义具体的列类型。

 

Store：存储器，用于整合Proxy和Reader，控件索取数据时通常和他打交道。

 

 

 

二、Ext.data.DataProxy 类

proxy是代理的意思，很多时候，聪明的架构师和设计者为了屏蔽底层的差异，给用户提供一个统一的访问接口，会设计一个名为“proxy”的类。这种设计哲学在架构中普通应用，并且解决了很多实际问题，代码也变得更加优雅，并有效降低代码侵入。

Ext.data. DataProxy就是来源于这样一种灵感。

Ext.data.DataProxy 是获取数据的代理，数据可能来自于内存，可能来自于同一域的远程服务器数据，更有可能来自于不同域的远程服务器数据。

 

 

 

但是，在实际应用中，我们不会直接使用Ext.data.DataProxy，而是使用他的子类：MemoryProxy、HttpProxy和ScriptTagProxy，他们的作用分别是：

MemoryProxy：获取来自内存的数据，可以是数组、json或者xml。

HttpProxy：使用HTTP协议通过ajax 从远程服务器获取数据的代理，需要指定url。

ScriptTagProxy：功能和HttpProxy一样，但支持跨域获取数据，只是实现时有点偷鸡摸狗。

 

 

 

因为数据最终要显示在ComboBox 中，所以我们以ComboBox 为中心进行设计。大家应该知道，下拉列表框有两个值，一个是显示值，另一个是实际值，也就是说，一个数据项包含两列：显示值列和实际值列。我们定义一个用来保存城市名称的二维数组：

 

 

var cities = [["1", "沈阳"], ["2", "大连"], ["3", "鞍山"], ["4", "辽阳"]];

在二维数组中，每一个城市保存了两个值：值一表示城市编号，作为实际值，值二表示城市名称，作为显示值。然后，我们将data 构建出一个MemoryProxy对象：

 

 

var mp = new Ext.data.MemoryProxy(cities);

 

 

 

三、Ext.data.DataReader 类

 

DataReader 从来不是单独行动的，他没有太多的自主权，总是看DataProxy行事。总体来说，DataReader 用来定义数据项（行）的逻辑结构，主要信息有：列的逻辑名称（name）、列的数据类型（type）、列与数据源的索引映射（mapping）等，另外，还包含一些元数据，如分页信息。

实际上，每一个数据项都是一个Ext.data.Record（记录）对象，而数据项的列信息则是通过Ext.data.Record来定义的。Ext.data.Record并没有固定的结构，他保存的是一个json对象数组，数组的元素个数由列的数量来决定。在上面的例子中，城市包含ID 和名称，所以，必须在数组中定义两个元素，基本就是这个样子：

 

 

	var myRecord = Ext.data.Record.create([{
				name : 'cid',
				type : 'int',
				mapping : 0
			}, {
				name : 'cname',
				type : 'string',
				mapping : 1
			}]);

我们定义了一个myRecord的结构，通过Ext.data.Record.create创建，参数是一个json对象数组，name 和type 分别表示每一列的名称和数据类型，mapping 是列值与数组元素的映射关系。 

 

 

Record 创建好后，必须和DataReader 关联，DataReader 也同样有三个子类：Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader。我之前说过DataReader 从来不单独行动，使用哪一个子类主要取决于DataProxy中封装的数据类型，如果是数组，则使用Ext.data.ArrayReader；如果是json，则使用Ext.data.JsonReader；如果是xml，则使用Ext.data.XmlReader。

 

在本例中，我们处理的数据类型是数组，所以自然要使用ArrayReader。

 

var myReader = new Ext.data.ArrayReader({}, myRecord);

构造ArrayReader 对象时，构造函数的第一个参数就是元数据，第二个参数则是Record。也可以一步到位： 

 

 

var myReader = new Ext.data.ArrayReader({}, [
{name: "cid", type: "int", mapping: 0},
{name: "cname", type: "string", mapping: 1}
]);

 

 

四、Ext.data.Store 类

这个类相对简单，不需要面对数据和结构，只是把DataProxy和DataReader 整合在一起，这样一来，数据有了，结构有了，俨然就是一张数据表，想一想数据库中的物理表是不是就是这样的呢？嗯，非常像。

典型的写法像这样：

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader
});

到了这一步，别以为大功告成了，其实这时候数据并没有加载到Store中，默认情况下，Store采取延时加载，必须显式调用load()方法，当然，我们也可以采取即时加载策略，按如下配置即可： 

var store = new Ext.data.Store({
    proxy: proxy,
    reader: reader,
    autoLoad: true //即时加载数据
});

我们画张图，用来描述这三个类之间的关系。

可以看出，Ext.data.Store的主要目的是在内存中建立一张数据表，填充到组件中，这些组件形态也千差万别，最典型的就是ComboBox 和GridPanel。

 

 

五、下拉列表框

下拉列表框被定义成ComboBox 类，位于Ext.form命名空间，和Button不同，他是一个表单域组件，常用于表单中。

我们有一个这样的ComboBox，该组件用来显示辽宁的城市。

看起来和select标记别无二致，只是更加漂亮了。  

 

一起来熟悉一个比较典型的ComboBox的定义方法：

var combobox = new Ext.form.ComboBox({
			renderTo : Ext.getBody(),
			triggerAction : "all",
			store : store,
			displayField : "cname",
			valueField : "cid",
			mode : "local",
			emptyText : "请选择辽宁城市"
		});

嘿嘿，如果不解释您一定会愣上半天，有时候真不习惯Extjs中属性名称的定义风格，也许只怪我们的头发太长见识太少，来认识一下吧。

triggerAction：是否开启自动查询的功能，为all表示不开启，为query表示开启，默认为query；

store：不用解释了，和前面的Ext.data.Store对象挂勾，定义数据源；

displayField：关联Record的某一个逻辑列名作为显示值，本例为城市名称；

valueField：关联Record的某一个逻辑列名作为实际值，本例为城市ID；

mode：可选值有local和remote，如果数据来自本地，用local，如果数据来自远程服务器，必须用remote，默认为remote；

emptyText：没有选择任何选项的情况文本框中的默认文字。

 

请理解并记住这个基本的用法，很多东西都是这样巩固消化的。当我们面对如海水般涌来的信息，第一感觉就是无所适从，继而惊惶失措，夺路而逃，于是被永远挡在真理的大门之外。成功和失败，只在一念之间。

抓住核心点之后，慢慢扩展，知识架构便会越来越丰满，因为把握好了整个知识点的精髓，再怎么变化，都不至于迷路。 

 

六、得到下拉列表框的值

下拉列表框（ComboBox）有两个值，显示值和实际值。显示值为用户提供了更为直观和理想的体验，而实际值则会传送到服务器，供服务器处理。

ComboBox定义了两个方法，其中，getValue()用于返回实际值，getRawValue()用于返回显示值。

我在页面上放置了一个按钮，点击按钮显示下拉列表框的值：

var btn = new Ext.Button({
			text : "列表框的值",
			renderTo : Ext.getBody(),
			handler : function() {
				Ext.Msg.alert("值", "实际值：" + combobox.getValue() + "；显示值："
								+ combobox.getRawValue());
			}
		});

 

七、源代码

下面是本章示例的源程序：

Ext.onReady(function() {
			cmp();
		});

var cmp = function() {
	// 1. 定义本地静态数据
	var cities = [["1", "沈阳"], ["2", "大连"], ["3", "鞍山"], ["4", "辽阳"]];
	// 2. 根据数据定义内存代理
	var mp = new Ext.data.MemoryProxy(cities);
	// 3. 创建记录格式
	var myRecord = Ext.data.Record.create([{
				name : 'cid',
				type : 'int',
				mapping : 0
			}, {
				name : 'cname',
				type : 'string',
				mapping : 1
			}]);
	// 4.把数据按照创建的记录格式进行组合
	var myReader = new Ext.data.ArrayReader(mp, myRecord);
	//var reader = new Ext.data.ArrayReader({}, myRecord);
	
	// 5.把数据按照一定格式组成的数据组传入缓存
	var myStore = new Ext.data.Store({
				proxy : mp,
				reader : myReader,
				autoLoad : true
			});
	// store.load(); 如果在Store配置信息中使用autoLoad:true,就可以不用此方法.
	// 5.创建下拉列表,把数组写入下接列表
	var myCb = new Ext.form.ComboBox({
				id : "myCb1",
				store : myStore,
				title : "辽宁省下属市",
				emptyText : "辽宁省下属市",
				displayField : "cname",
				valueField : "cid",
				triggerAction : "all",
				mode : "local",
				renderTo : Ext.getBody()
			});
	// 6.创建按钮,实现读取下拉列表
	var myBtn = new Ext.Button({
				id : "myBtn1",
				type : "button",
				text : "所选城市",
				renderTo : Ext.getBody(),
				handler : function() {
					if (myCb.getValue() == "") {
						Ext.Msg.alert("提示","请做出选择");
						myCb.focus(true);
					} else {
						Ext.Msg.alert("值", "实际值：" + myCb.getValue() + "；显示值："
										+ myCb.getRawValue());
					}
				}
			});
}

 

 

 

 

评论

2 楼 baseball 2014-08-07  

您好：
謝謝您分享，請問您是用EXTJS 哪一版?
但 我使用 Extjs 4.2
參考您的 CODE，但 chrome console 中結果卻顯示
Uncaught TypeError: Cannot read property 'items' of undefined

請問 這該如何處理呢?

Ext.onReady(function(){
  var cities = [["1", "瀋陽"], ["2", "大連"], ["3", "安山"], ["4", "寮楊"]];
  var mp = new Ext.data.MemoryProxy(cities);
  
  var myRecord = Ext.data.Record.create([
                   {name : 'cid',type : 'int',mapping : 0	},
                   {name : 'cname',type : 'string',mapping : 1}
                 ]);
                   

                   
   var myReader = new Ext.data.ArrayReader({}, myRecord);        
   
   var store = new Ext.data.Store({
    proxy: mp,
    reader: myReader
   });
       
   console.log(store.getCount());          
});

1 楼 tangduDream 2013-03-04  

extjs 喔喔喔