2012/7/26Extjs学习笔记

①Extjs中有一个名为Record的类，表格等控件中使用的数据是存放在Record对象中，一个人Record可以理解为关系数据表中的一 行，也可以称为记录。Record对象中即包含了记录（行中的各列）的定义信息。也就是该记录包含哪些字段，每一个字段的数据类型等。同时又包含了具体的 记录信息，也就是各个字段的值。

看代码：

 <script>
   Ext.onReady(function(){
   var record = Ext.data.Record.create([
   {name:'title'},
   {name:'username',mapping:'author'},
   {name:'loginTimes',type:'int'},
   {name:'lastLoginTime',mapping:'loginTime',type:'date'}
   ]);
   var r =new record({
       title:'日志标题',
       username:'cnblogs',
       loginTimes:100,
       loginTime:new Date()
   });
   alert(record.getField("username").mapping);
   alert(record.getField("lastLoginTime").type);
   alert(r.data.username);
   alert(r.get('loginTimes'));
        
       });
   </script>

通过Ext.data.Record.create()方法创建一个record类。record类取得其内数据的方法为getField()。而record对象取得其数据的方法可以为r.data.name的方式，也可以是r.get('name')的方式。

另外，r.set(name,value)可以设定记录中某指定字段的值，r.dirty可以得到当前记录是否有字段的值被更改过等等。

②Store 可以理解为数据存储器，可以理解为客户端的小型数据表，提供缓存等功能。在Extjs中，GridPanel、ComboBox、DataView等控件 一般直接与Store打交道，直接通过store来获得控件中需要展现的数据等。一个Store包含多个Record，同时Store又包含了数据来源， 数据解析器等信息，Store通过调用具体的数据解析器（DataReader）来解析指定类型或格式的数据（DataProxy）,并转换成记录集的形 式保存在Store中，作为其他控件的数据输入。

数据存储器由Ext.data.Store类定义，一个完整的数据存储器要知道数据源及数 据解析方式（DataReader）才能工作，在Ext.data.Store类中数据源由Proxy配置属性定义、数据解析（读取）器由reader配 置属性定义，一个较为按部就班的创建Store代码如下：

   <script>
   alert(r.get('loginTimes'));
   Ext.onReady(function(){
	var record = Ext.data.Record.create([
		{name:'title'},
		{name:'username',mapping:'author'},
		{name:'loginTimes',type:'int'},
		{name:'lastLoginTimes',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'
	},
	record
	);
	var store = new Ext.data.Store({
		proxy:dataProxy,
		reader:theReader
	});
        
   	});
   </script>

 可以看到，这样的代码太冗杂，Store本身提供了一些快捷创建Store的方式，比如上面的代码可以不用先创建一个HttpProxy,只需要在创建Store的时候指定一个url配置参数，就会自动使用HttpProxy来加载参数。比如上面的代码可以简化成：

  <script>
   
   Ext.onReady(function(){
    var record = Ext.data.Record.create([
        {name:'title'},
        {name:'username',mapping:'author'},
        {name:'loginTimes',type:'int'},
        {name:'lastLoginTimes',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'
    },
    record
    );
    var store = new Ext.data.Store({
        url:'link.ejf',
        proxy:dataProxy,
        reader:theReader
    });
    store.load();     
       });
   </script>

上面代码虽然不需要再手动创建HttpProxy了，但是仍然需要创建DataReader等，代码量并未实质减少。

Extjs进一步把这种常用的数据存储器进行了封装，在Store类的基础上提供了SimleStore、GroupingStore等，直接使用SimpleStore,则上面代码可以进一步简化：

var store =new Ext.data.SimpleStore({

　　url:'link.jsp',

　　totalProperty:'results',

　　root:'rows',

　　fields:['title',{name:'username',mapping:'author'},

　　{name:'loginTimes',type:'int'},

　　{name:'lastLoginTime',mapping:'loginTime',type:'date'}

]

});

store.load();