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:

if(dirty){var a = modified['Name']};

構造函數：

Record( Array data, [Object id] )

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( Object params, Ext.data.DataReader reader, Function callback, Object scope, Object arg ) : void

MemoryProxy( Object data )

e.g:

MemoryProxy只可以識別數據對象的數據格式如下:

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

定義reader 可以又多種方法:

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

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

一般使用第2種方法,因為代碼量少

DataReader ,ArrayReader ,JsonReader 的繼承關系如下:
JsonReader 繼承DataReader ,ArrayReader 繼承JsonReader ,ArrayReader 于JsonReader 唯一的區別就是readRecords方法的實現不一樣;

下面就著源碼講解一下為什么DataReader 可以用多種方法去生成

DataReader:

Ext.data.DataReader = function(meta, recordType){

this.meta = meta;
this.recordType = Ext.isArray(recordType) ?
Ext.data.Record.create(recordType) : recordType;
};

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

JsonReader:

Ext.data.JsonReader = function(meta, recordType){
meta = meta || {};
Ext.data.JsonReader.superclass.constructor.call(this, meta, recordType || meta.fields);
};

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:

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

var jsonData = {
'totalCount':2,
'data':[
{'Name':'tt','Address':'shenzhen'},
{'Name':'tt1','Address':'shenzhen'}
]
};

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

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

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

Ext.data庫中最重要的就是Ext.data.Store ,它可以為Ext.grid.GridPanel ,Ext.form.Combox ...提供數據源

有2種Store都繼承自Ext.data.Store:Ext.data.JsonStore 和Ext.data.SimpleStore

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沒有數值
就用config 的url直接生成一個this.proxy=HttpProxy();
this.proxy在后面的load()函數中會使用到，這就是為什么有時我們在配置store的時候提供了config.data 和config.reader,而沒有提供config.proxy就會報錯的原因
因為在load()函數中會調用Ext.data.DataProxy.load()方法

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

JsonStore 的構造函數源碼如下:

Ext.data.JsonStore = function(c){


Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(c, {
proxy: c.proxy || (!c.data ? new Ext.data.HttpProxy({url: c.url}) : undefined),
reader: new Ext.data.JsonReader(c, c.fields)
}));
};

生成原理：

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){
Ext.data.SimpleStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.ArrayReader({
id: config.id
},
Ext.data.Record.create(config.fields)
)
}));
};

SimpleStore的生成原理與JsonStore大體一致,

在以上的2段代碼中都要注意到的是config.fields配置屬性,他們都被用來去生成Ext.data.Record對象;

現在舉幾個生成Store對象的例子

1.

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

var store = new Ext.data.SimpleStore({

data:data,

fields:['Name','Address']

});

2.

var jsonData = {
'totalCount':2,
'data':[
{'Name':'tt','Address':'shenzhen'},
{'Name':'tt1','Address':'shenzhen'}
]
};

var store = new Ext.data.JsonStore({

data:jsonData ,

fields:['Name','Address'],

id:'Name',

root:'data',

totalProperty:'totalCount'

});

3.

var store = new Ext.data.JsonStore({

URL：

fields:['Name','Address'],

id:'Name',

root:'data',

totalProperty:'totalCount'

});

其中以第3中方法使用最為廣泛.

總結

以上是生活随笔為你收集整理的Ext.data库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。