2012/7/26Extjs学习笔记
①Extjs中有一个名为Record的类,表格等控件中使用的数据是存放在Record对象中,一个人Record可以理解为关系数据表中的一 行,也可以称为记录。Record对象中即包含了记录(行中的各列)的定义信息。也就是该记录包含哪些字段,每一个字段的数据类型等。同时又包含了具体的 记录信息,也就是各个字段的值。
看代码:
1 <script> 2 Ext.onReady(function(){ 3 var record = Ext.data.Record.create([ 4 {name:'title'}, 5 {name:'username',mapping:'author'}, 6 {name:'loginTimes',type:'int'}, 7 {name:'lastLoginTime',mapping:'loginTime',type:'date'} 8 ]); 9 var r =new record({ 10 title:'日志标题', 11 username:'cnblogs', 12 loginTimes:100, 13 loginTime:new Date() 14 }); 15 alert(record.getField("username").mapping); 16 alert(record.getField("lastLoginTime").type); 17 alert(r.data.username); 18 alert(r.get('loginTimes')); 19 20 }); 21 </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来加载参数。比如上面的代码可以简化成:
1 <script> 2 3 Ext.onReady(function(){ 4 var record = Ext.data.Record.create([ 5 {name:'title'}, 6 {name:'username',mapping:'author'}, 7 {name:'loginTimes',type:'int'}, 8 {name:'lastLoginTimes',mapping:'loginTime',type:'date'} 9 ]); 10 // var dataProxy = new Ext.data.HttpProxy({url:'link.ejf'}); 11 var theReader = new Ext.data.JsonReader({ 12 totalProperty:'results', 13 root:'rows', 14 id:'id' 15 }, 16 record 17 ); 18 var store = new Ext.data.Store({ 19 url:'link.ejf', 20 proxy:dataProxy, 21 reader:theReader 22 }); 23 store.load(); 24 }); 25 </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();