`
zhiming_817
  • 浏览: 164853 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

《ExtJS2.0实用简明教程》之Store

阅读更多

Store可以理解为数据存储器,可以理解为客户端的小型数据表,提供缓存等功能。在ExtJS中,GridPanel、ComboBox、DataView等控件一般直接与Store打交道,直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record,同时Store又包含了数据来源,数据解析器等相关信息,Store通过调用具体的数据解析器(DataReader)来解析指定类型或格式的数据(DataProxy),并转换成记录集的形式保存在Store中,作为其它控件的数据输入。
  数据存储器由Ext.data.Store类定义,一个完整的数据存储器要知道数据源(DataProxy)及数据解析方式(DataReader)才能工作,在Ext.data.Store类中数据源由proxy配置属性定义、数据解析(读取)器由reader配置属性定义,一个较为按部就班创建Store的代码如下:

var MyRecord = Ext.data.Record.create([
	    {name: 'title'},
	    {name: 'username', mapping: 'author'},
	    {name: 'loginTimes', type: 'int'},
	    {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
		]);
	var dataProxy=new Ext.data.HttpProxy({url:"link.ejf"});
	var theReader=new Ext.data.JsonReader({
	    totalProperty: "results",  
	    root: "rows",              
	    id: "id"                   
		},MyRecord);
	var store=new Ext.data.Store({		
			proxy:dataProxy,
			reader:theReader
		});
	store.load();

  当然,这样的难免代码较多,Store中本身提供了一些快捷创建Store的方式,比如上面的示例代码中可以不用先创建一个HttpProxy,只需要在创建Store的时候指定一个url配置参数,就会自动使用HttpProxy来加载参数。比如,上面的代码可以简化成:

 

var MyRecord = Ext.data.Record.create([
	    {name: 'title'},
	    {name: 'username', mapping: 'author'},
	    {name: 'loginTimes', type: 'int'},
	    {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
		]);
	var theReader=new Ext.data.JsonReader({
	    totalProperty: "results",  
	    root: "rows",              
	    id: "id"                   
		},MyRecord);
	var store=new Ext.data.Store({	
	url:"link.ejf",
			proxy:dataProxy,
			reader:theReader
		});
	store.load();

  虽然不再需要手动创建HttpProxy了,但是仍然需要创建DataReader等,毕竟还是复杂,ExtJS进一步把这种常用的数据存储器进行了封装,在Store类的基础上提供了SimpleStore、SimpleStore、GroupingStore等,直接使用SimpleStore,则上面的代码可以进一步简化成下面的内容:

var store=new Ext.data.JSonStore({		
		url:"link.ejf?cmd=list",
		totalProperty: "results",  
   	 	root: "rows",
		fields:['title',   {name: 'username', mapping: 'author'},
	    {name: 'loginTimes', type: 'int'},
	    {name: 'lastLoginTime', mapping: 'loginTime', type: 'date'} 
		]	
	});
	store.load();
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics