Ext.data库

Ext.data 库主要包括以下几个类：

Ext.data.Store ==>DataSet

Ext.data.Record ==>DataSet.Row

Ext.data.DataProxy ==>SqlConnection

Ext.data.DataReader ==>SqlDataAdapter

以下分别进行介绍:

1.Ext.data.Record

可以用来定义一行数据的格式,它有几个重要的属性和方法:

data:实际的数据

modified:如果dirty==true 这modified中存放的是修改前的数据否则为空

e.g:

<wbr><wbr><wbr><wbr>if(dirty){var a = modified['Name']};</wbr></wbr></wbr></wbr>

构造函数：

Record( <wbr><span style="font-size:16px;"><code><span style="font-family:新宋体;">Array data</span></code>, <span class="optional" title="Optional"><span style="font-family:Courier New;">[</span><code><span style="font-family:新宋体;">Object id</span></code><span style="font-family:Courier New;">]</span></span></span> <wbr>)</wbr></wbr>

e.g:

var a = new Ext.data.Record([

{name:'Name'},

{name:'Address'}

],{id:'Name'}) ;

其中第2个参数可以不写

等价于

var a = Ext.data.Record.create([

{name:'Name'},

{name:'Address'}

],{id:'Name'}) ;

生成一行实际数据

var record = new a({

Name:'test',

Address:'where'

});

Ext.Msg.alert('test',record.get('Name')) 输出:'test'

Ext.Msg.alert('test',record.data.Name)输出:'test'

定义好行的格式之后我们就可以生成DataProxy去获取数据

DataProxy 分为3种,我们主要使用其中的2种MemoryProxy 和HttpProxy,其中最重要的方法:

load( <wbr><code><span style="font-family:新宋体;">Object params</span></code>, <code><span style="font-family:新宋体;">Ext.data.DataReader reader</span></code>, <code><span style="font-family:新宋体;">Function callback</span></code>, <code><span style="font-family:新宋体;">Object scope</span></code>, <code><span style="font-family:新宋体;">Object arg</span></code> <wbr>) : void</wbr></wbr>

MemoryProxy( <wbr><code><span style="font-family:新宋体;">Object data</span></code> <wbr>)</wbr></wbr>

e.g:

MemoryProxy只可以识别数据对象的数据格式如下:

var data = [['tt','shenzhen'],['tt2','shenzhen']];

定义reader 可以又多种方法:

1.var reader <wbr>= new Ext.data.ArrayReader({id:'Name'},r);</wbr>

2.var reader <wbr>= new Ext.data.ArrayReader({id:'Name',fields:['Name','Address']});</wbr>

一般使用第2种方法,因为代码量少

DataReader ,ArrayReader ,JsonReader 的继承关系如下:
JsonReader 继承DataReader ,ArrayReader 继承JsonReader ,ArrayReader 于JsonReader 唯一的区别就是readRecords方法的实现不一样;

下面就着源码讲解一下为什么DataReader 可以用多种方法去生成

DataReader:

Ext.data.DataReader = function(meta, recordType){
<wbr><wbr><wbr><br><wbr><wbr><wbr>this.meta = meta;<br><wbr><wbr><wbr>this.recordType = Ext.isArray(recordType) ?<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr>Ext.data.Record.create(recordType) : recordType;<br>};</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

---------------------------------------------------------

<wbr>JsonReader:</wbr>

Ext.data.JsonReader = function(meta, recordType){
<wbr><wbr><wbr>meta = meta || {};<br><wbr><wbr><wbr>Ext.data.JsonReader.<span style="BACKGROUND-COLOR: yellow">superclass.constructor</span>.call(<span style="color:red;">this, meta, recordType || meta.fields</span>);<br>};</wbr></wbr></wbr></wbr></wbr></wbr>

JsonReader 的构造函数中调用了DataReader的构造函数就是我用黄颜色标记的地方,如果JsonReader 的Config对象中提供了fields属性则调用的方法如下:

DataReader(meta,meta.fields);

否则就只能只用使用原来Ext.data.Record.create()生成的对象去初始化DataReader(meta,r.prototype.fields);

var proxy = new Ext.data.MemoryProxy(data);

proxy.load(null,reader,callback,this,{req:'123'});

function callback(Records,arg,bFlag){alert(Records.records[0].get('Name'))} 输出:'tt';

proxy的load 方法中调用了reader.readerRecords(data)来读取数据结果就是callback函数中的Records{records: [],recordsCount}:records为读出的数据的数据对象,recordsCount表示记录的行数;

当然也可以生成一个JsonReader 对象来读取数据

e.g:

<wbr>var jsonReader = new Ext.data.JsonReader({<br><wbr><wbr><wbr>id:'Name',<br><wbr><wbr><wbr>root:'data',<br><wbr><wbr><wbr>totalProperty:'totalCount',<br><wbr><wbr><wbr>fields:['Name','Address']<br><wbr><wbr><wbr>});</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr>var jsonData <wbr>= <wbr>{<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>'totalCount':2,<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>'data':[<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{'Name':'tt','Address':'shenzhen'},<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{'Name':'tt1','Address':'shenzhen'}<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>]<br><wbr><wbr><wbr>};</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr></wbr>

<wbr>var proxy = new Ext.data.MemoryProxy(jsonData);</wbr>

<wbr>proxy.load(null,reader,callback,this,{req:'123'});</wbr>

<wbr>function callback(Records,arg,bFlag){alert(Records.records[0].get('Name'))} 输出:'tt';</wbr>

<wbr>Ext.data库中最重要的就是Ext.data.Store ,它可以为Ext.grid.GridPanel ,Ext.form.Combox ...提供数据源</wbr>

<wbr>有2种Store都继承自Ext.data.Store:Ext.data.JsonStore 和Ext.data.SimpleStore</wbr>

Ext.data.JsonReader 对应 Ext.data.JsonReader ;Ext.data.SimpleStore 对应 Ext.data.ArrayReader

Ext.data.Store的主要Config属性有:

url:请求数据的Url地址;

data:直接提供的数据源;

proxy:Ext.data.DataProxy(从哪里取数据);

reader:Ext.data.DataReader(取什么样的数据);

baseParams:请求时要附加的参数:{req:'123'};

以上的配置属性之间有一些联系,主要表现在url和proxy上面

现在讲解一下store中各个对象的生成关系和顺序:

1.初始化baseParams:{start:,limit:sort:dir:}
2.判断有没有直接传入数据集合==>config.data==null ;this.inlineData = data;
3.config.url !=null 同时config.proxy没有数值
<wbr><wbr><wbr><wbr><wbr><wbr>就用config 的url直接生成一个this.proxy=HttpProxy();<br><wbr><wbr><wbr><wbr><wbr><wbr>this.proxy在后面的load()函数中会使用到，这就是为什么有时我们在配置store的时候提供了config.data 和config.reader,而没有提供config.proxy就会报错的原因<br><wbr><wbr><wbr><wbr><wbr><wbr>因为在load()函数中会调用Ext.data.DataProxy.load()方法</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

4.判断是否提供了config.reader,生成this.recordType 和this.fields

JsonStore 的构造函数源码如下:

Ext.data.JsonStore = function(c){
<wbr><wbr><wbr><br><wbr><wbr><wbr><br><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="BACKGROUND-COLOR: yellow">proxy: c.proxy || (!c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined),</span><br><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>reader: new Ext.data.JsonReader(c, c.fields)
<wbr><wbr><wbr><span style="font-family:Courier New;">}));<br>};</span></wbr></wbr></wbr>

生成原理：

1.调用Ext.data.Store的构造函数,其中我标为黄色的语句表达的意思就是:如果提供了proxy配置属性就使用当前配置的Proxy去获取数据,没有提供则判断是否有直接数据源提供,没有则用

url配置属性去生成一个HttpProxy去获取数据,绿色语句是生成Ext.data.DataReader对象,在Store 的Load()方法会使用他去读取数据;

在这里顺便介绍一下在源码中使用最多的一种语句 (c = a||b )== (c=a==undefinde ? b:a)

---------------------------------------------------------------------

SimpleStore 的构造函数源码如下:

Ext.data.SimpleStore = function(config){
<wbr><wbr><wbr><span style="color:red;">Ext.data.SimpleStore.superclass.constructor</span>.<span style="color:red;">call</span>(this, Ext.apply(config, {<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr><wbr><span style="font-family:Courier New;font-size:13px;">reader: new Ext.data.ArrayReader({<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>id: config.id<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>},<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>Ext.data.Record.create(config.fields)</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></span></wbr>
<wbr><wbr><wbr><wbr><wbr><wbr><wbr><span style="font-family:Courier New;font-size:13px;">)<br><wbr><wbr><wbr>}));<br>};</wbr></wbr></wbr></span></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

SimpleStore的生成原理与JsonStore大体一致,

在以上的2段代码中都要注意到的是config.fields配置属性,他们都被用来去生成Ext.data.Record对象;

现在举几个生成Store对象的例子

1.

<wbr><wbr><wbr><wbr><wbr>var data =[['tt','shenzhen'],['tt2','shenzhen']];</wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr>var store = new Ext.data.SimpleStore({</wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>data:data,</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>fields:['Name','Address']</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr>});</wbr></wbr></wbr></wbr>

2.

<wbr><wbr><wbr><wbr><wbr>var jsonData <wbr>= <wbr>{<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>'totalCount':2,<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>'data':[<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{'Name':'tt','Address':'shenzhen'},<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>{'Name':'tt1','Address':'shenzhen'}<br><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>]<br><wbr><wbr><wbr>};</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr>var store = new Ext.data.JsonStore({</wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>data:jsonData <wbr>,</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>fields:['Name','Address'],</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>id:'Name',</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>root:'data',</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>totalProperty:'totalCount' <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr>});</wbr></wbr></wbr></wbr>

3.

<wbr></wbr>

<wbr><wbr><wbr><wbr>var store = new Ext.data.JsonStore({</wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>URL：</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>fields:['Name','Address'],</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>id:'Name',</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>root:'data',</wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr>totalProperty:'totalCount' <wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr>});</wbr></wbr></wbr></wbr>

其中以第3中方法使用最为广泛.

评论

1 楼 hzxlb910 2013-06-04  

没法看