extjs学习笔记----数据的获取与ComboBox

Ext.data和ComboBox：
Ext.data命名空间下的类来组织和管理数据：
Ext.data下的三个类：DataProxy,DataReader,Store;
以数据库表为例来讲解三个类的作用：
	DataProxy：相当于表中的数据；
	DataReader：相当于表中的列；
	Store：相当于一张表(存储列和数据)；
1、Ext.data.DataProxy:获取数据的代理，数据可以来自与内存、同一个区域的远程服务器，
			或者不同域的远程服务器；
		在实际应用中我们不会直接使用Ext.data.DataProxy,而是使用他的子类：
			MemoryProxy,HttpProxy和ScriptTagProxy，他们的作用分别是：
				MemoryProxy：获取来自内存的数据，可以是数组、json或者xml；
				HttpProxy:使用HTTP协议通过ajax从远程服务器获取数据的代理，需要制定url；
				ScriptTagProxy:功能和HttpProxy一样，但是支持跨域获取数据;
				var cities=[[1,"济南市"],
							[2,"南京市"],
							[3,"北京市"]];
				var proxy=new Ext.data.MemoryProxy(cities);
2、Ext.data.DataReader:用来定义数据(行)的逻辑结构，主要信息有：列名称(name)，
						列的数据类型(type),列于数据源的索引映射(mapping)等
			每一个数据项都是一个Ext.data.Record（记录）对象，数据项的列信息是通过
			Ext.data.Record来定义的，Ext.data.Record并没有固定的结构，它保存的
			是一个json对象数组；
			var City=Ext.data.Record.create([{name:"cid",type:"int",mapping:0},
											{name:"cname",type:"string",mapping:1}]);
			Record创建好后，必须和DataReader关联，DataReader也同样有三个子类：
			Ext.data.ArrayReader、Ext.data.JsonReader、Ext.data.XmlReader；使用
			哪一个子类决定与DataProxy中封装的数据类型。
			//var reader=new Ext.data.ArrayReader({},City);
			var reader=new Ext.data.ArrayReader({},[
				{name:"cid",type:"int",mapping:0},
				{name:"cname",type:"string",mapping:1}
			]);
3、Ext.data.Store:存储数据，用来把DataProxy和DataReader整合在一起。
		var store=new Ext.data.Store({
			proxy:proxy,
			reader:reader,
			autoLoad:true//即时加载数据----作用是：store.load()
		});
4、ComboBox：
	var combobox=new Ext.form.ComboBox({
		renderTo:Ext.getBody(),
		triggerAction:"all",//是否开启自动查询功能，all表示不开启，query表示开启
		store:store,
		displayField:"cname",//关联Record的某一个逻辑列名作为显示值
		valueField:"cid",//关联Record的某一个逻辑列名作为实际值
		mode:"local",//local表示本地，远程服务器必须用remote
		emptyText:"请选择济南市"
	});
5、得到下拉列表框的值：
	var btn=new Ext.Button({
		text:"列表框的值",
		renderTo:Ext.getBody(),
		handler:function(){
			Ext.Msg.alert("值","实际值："+combobox.getValue()+";显示值："+combobox.getRawValue());
		}
	});
	
6、全部代码：
	Ext.onReady(function (){
		var cities=[[1,"济南市"],
					[2,"南京市"],
					[3,"北京市"]];
		var proxy=new Ext.data.MemoryProxy(cities);
		
		var City=new Ext.data.Record.create([{name:"cid",type:"int",mapping:0},
										{name:"cname",type:"string",mapping:1}]);
		var reader=new Ext.data.ArrayReader({},City);
		//数据源
		var store=new Ext.data.Store({
			proxy:proxy,
			reader:reader,
			autoLoad:true
		});
		
		var comboBox=new Ext.form.ComboBox({
			renderTo:Ext.getBody(),
			triggerAction:'all',
			store:store,
			displayField:'cname',
			valueField:'cid',
			mode:'local',
			emptyText:'请选择地市'
		});
		var btn=new Ext.Button({
			renderTo:Ext.getBody(),
			text:"列表框的值",
			handler:function(){
				Ext.MessageBox.alert("值","实际值:"+comboBox.getValue()+";显示值:"+comboBox.getRawValue());
			}
		});
	});