Ext Js簡單Data Store創建及使用

　　不知道大家是如何學習一門新語言、一門技術或某一新鮮事物的？可能還是自己在一開始學習編程時常聽到的那樣，找一本基礎的書看看，把書上的每一個示例都敲一遍，把書上的每一段代碼都理順。現在忙碌生活中又是如何接觸學習這些新鮮事物的呢？當然，我們的水平永遠不會停留在初級，也不會像最初學習編程那樣的笨拙，提出一些很沒有技術含量的問題，我們會隨着對技術的學習和使用會有一種融會貫通的感覺。哦，原來是這樣處理的，效果很炫，處理起來並不是很難，學習理解能力也提高了，學習起來也快了，很快就能上手(簡單會使用，但是還不很深入)。

　　對於一些新事物的學習，可能這是我們的通常所想所做的，就是先根據簡單示例，模仿它實現的效果；然后修修改改變通一下，簡單的靈活使用；然后在平時的學習、工作中大量使用，漸漸變得更熟練，理解更加到位，研究更深入；然后在使用該技術創新於不同應用，去實現某種想要的效果。我們就是由模仿，到熟練，到靈活運用，到廣泛應用，到提取造輪子，到形成體系結構。(可能還會考慮的是有沒有學習資料，有沒有開放的比較系統的學習資源。鼓勵大家多多寫博客，把對技術的學習、理解，生活的感悟，整理成文章，對自己澄清思維，也能幫助到他人。當我們在享受他人幫助的同時，希望也能去幫助更多人。受益於開源，推崇開源。)

扯遠了，今天分享的是對於Ext Js的data的相關操作，主要是對Ext.data.Store的使用：(store常需要proxy\reader)
1.Ext.data.Connection的創建使用

//Ext.data.Connection
function storeConnection() {
    var conn = new Ext.data.Connection({
        method: 'GET', //請求方法
        timeout: 300, //鏈接超時時間
        url: '01-01.txt', //請求訪問網址
        autoAbort: false, //是否自動斷開                
        disableCaching: false, //是否默認禁用緩存
        extraParams: { name: 'name' }, //請求的額外參數
        defaultHeaders: { referer: 'http://localhost:8080'}//請求默認首部信息
    });

    conn.request({
        success: function (response) { Ext.Msg.alert('InfoMessage', response.responseText); },
        failure: function (response) { Ext.Msg.alert('WarnInfo', 'This Request Is Failure!'); }
    });
    //request的參數:url\params\method\callback\success\failure\scope\form\isUpload\headers\xmlData\disableCaching
    //參數:請求URL\傳遞參數\請求方法(GET\POST)\回調函數(無論成敗)\成功回調\失敗回調\回調作用域\綁定的表單\是否支持文件上傳\請求首部信息
}

2.Ext.data.Record的創建使用(記錄的創建使用)

//Ext.data.Record
function storeRecord() {
    var personRecord = Ext.data.Record.create([//創建一個自定義的Record類型結構
            {name: 'name1', type: 'string' },
            { name: 'sex', type: 'int' }
            ]);

    var boy1 = new personRecord({ name: 'boy1', sex: 0 }); //創建實例
    var boy2 = new personRecord({ name: 'boy2', sex: 0 });

    //調用實例屬性
    alert(boy1.data.name); //讀取操作
    alert(boy2.data['name'] + ";" + boy2.get('sex'));
    boy1.set('name', 'newName'); //寫入操作

    //Record屬性數據被修改后,數據原值放在modified對象中,可以執行如下操作:
    //commit()\reject()\getChanges(),表示提交(刪除modified數據)\撤銷(刪除modified數據)\獲取修改部分
    //isModified(),判斷是否被修改;copy(),復制實例,如:var boyCopy=boy1.copy();
}

3.Ext.data.Store的創建使用(小型數據集)

//Ext.data.Store
function storeTest() {
    var personRecord = Ext.data.Record.create([{ name: 'name1', type: 'string' }, { name: 'sex', type: 'int'}]);
    var data = [['boy1', 0], ['boy2', 0]];
    var myStore = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, personRecord),
        sortInfo: { field: 'name', direction: 'DESC' }
        //根據排序字段排序,也可以store.setDefaultSort('name','DESC');或store.sort('name','DESC');
        //調用排序信息,getSortState()函數,返回JSON數據：{ field: 'name', direction: 'DESC' }
    });

    myStore.load();

    return myStore;
}

4.讀取store中的數據

//從store中獲取數據
function storeData() {
    var store = new Ext.data.Store();
    store = storeTest(); //獲取store對象

    store.getAt(0).get('name'); //獲取數據

    for (var i = 0; i < store.getCount(); i++) {//遍歷store中的記錄
        var record = store.getAt(i); //獲取第i條記錄
        alert(record.get('name'));
    }
    //遍歷集合,處理數據
    store.each(function (record) { alert(record.get('name')); });

    //也可以使用getRange()函數連續獲取多個record
    var records = store.getRange(0, 1);
    for (var i = 0; i < records.length; i++) {
        var record = records[i];
        alert(record.get('name'));
    }
    //也可以通過getById來獲取對象
    store.getById(1001).get('name');

    //也可以使用find()和findBy()來進行搜索,
    //find(string property,string/RegExp value,[Number startIndex],[Boolean anyMatch],[Boolean caseSensitive])
    //5參數:搜索字段名,匹配字符串或正則表達式,從第幾行開始索引,為true不必從頭開始匹配,為true區分大小寫
    var index = store.find('name', 'g');
    alert(store.getAt(index).get('name'));

    //findBy(Function fn,[Object scope],[Number startIndex])
    //fn返回true,查找成功,停止遍歷返回行號;返回false,查找失敗,繼續遍歷
    var index = store.findBy(function (record, id) {
        return record.get('name') == 'boy1' && record.get('sex') == 1;
    });
    alert(store.getAt(index).get('name'));

    //也可以使用query()和queryBy()返回集合對象,用法一樣。
    alert(store.query('name', 'boy'));
    alert(store.queryBy(function (record) { return record.get('name') == 'boy1' && record.get('sex') == 0; }));
}

5.更新store中的數據

//更新store中的數據
function updateStore() {
    var store = new Ext.data.Store();
    store = storeTest(); //獲取store對象

    //add,添加一條記錄或一組記錄數組
    store.add(new personRecord({ name: 'other', sex: 0 })); //添加一個record實例
    store.add([new personRecord({ name: 'other1', sex: 1 }), new personRecord({ name: 'other2', sex: 0 })]); //添加record數組

    //addSorted,添加數據后立即更新數據,根據原來的排序進行重排，把數據顯示在對應的位子上
    store.addSorted(new personRecord({ name: 'other3', sex: 0 }));

    //insert,在某個位子處插入一條記錄或一組數據記錄,后面的數據自動后排
    store.insert(3, new personRecord({ name: 'other4', sex: 0 }));
    store.insert(3, [new personRecord({ name: 'other5', sex: 0 }), new personRecord({ name: 'other6', sex: 1 })]);

    //remove,刪除記錄;removeAll,清空所有數據
    store.remove(store.getAt(0)); //刪除指定記錄
    store.removeAll(); //清空所有數據

    //store沒有修改記錄的函數,需要取出record,進行修改；
    //然后在提交修改(commitChanges())或撤銷修改(rejectChanges())
    store.getAt(0).set('name', 'newName');
    //修改完畢，通過getModifiedRecords()獲取修改過的record數組,
    //可以設置參數pruneModifiedRecords為true,會清空所有修改（可以在執行刪除或reload時設置）
}

6.從store的數據加載

//store的數據加載
function loadData() {
    var store = new Ext.data.Store();
    store = storeTest(); //獲取store對象

    store.load({//load函數一般只執行一次,reload()重新加載時，自動讀取load設置的參數
        params: { start: 0, limit: 20 }, //records,獲取的數據;options,load()時傳遞的參數;success是否成功
        callback: function (records, options, success) { Ext.Msg.alert('Info', '加載完畢'); },
        scope: store,
        add: true//設置為true,load()得到的數據會添加到原來store數據的尾部,否則先清除之前的數據,將得到的數據添加到store中
    });

    //如果需要固定傳遞的參數,可以使用baseParams參數執行,作為JSON對象里面的數據發送到后台,如：
    store.baseParams.start = 0;
    store.baseParams.limit = 10;

    //對於store加載的數據,不需要全顯示的,可以使用filter和filterBy對store的數據進行過濾,只顯示符合條件的數據
    //filter(string filed,string/RegExp value,[Boolean anyMatch],[Boolean caseSensitive])和find\findBy的用法類似
    store.filter('name', 'boy');
    store.filterBy(function (record) { return record.get('name') == 'boy1' && record.get('sex') == 1; });

    store.clearFilter(); //取消過濾,顯示所有數據
    store.isFiltered(); //判斷store上是否設置過濾器
}

7.store的其他操作

function storeOthers() {
    var store = new Ext.data.Store();
    store = storeTest(); //獲取store對象

    //collect(string dataIndex,[Boolean allowNull],[Boolean bypassFilter]),返回一個Array數組
    //參數:指定dataIndex列數據;bypassFilter為true時則忽略查詢條件,顯示所有數據;
    //allowNull,為true返回結果會包含null\undefined\空字符串的數據,否則會被過濾掉;
    alert(store.collect('name')); //獲取所有name列的值

    //獲取總記錄數
    alert(store.getCount()); //也是獲取數據總數
    alert(store.getTotalCount()); //用於翻頁時從后台傳遞過來的數據總數

    //獲取記錄行號(根據記錄\記錄id)
    alert(store.indexOf(store.getAt(1)));
    alert(store.indexOfId(1001));

    //數據附加(追加)
    var data = []; //將data數據附加原數據后,否則整體刷新
    store.loadData(data, true);

    //求和計算(Sum(property,start,end),計算某一列從start到end的總和)
    alert(store.sum('sex')); //省略參數,計算該列全部數據
}

8.Proxy的創建使用(Proxy包括：MemoryProxy和HttpProxy)

//代理創建使用
function proxyTest() {
    //MemoryProxy:從內存,從JS對象讀取JSON\XML格式的數據
    var proxyMM = new Ext.data.MemoryProxy([
            ['id1', 'name1', 'descn1'],
            ['id2', 'name2', 'descn2']
            ]);

    //HttpProxy:使用HTTPY協議,通過AJAX從后台取數據
    //其返回數據格式：[['id1','name1'],['id2','name2']]
    //這里的HttpProxy不支持跨域處理,需要的話參見ScriptTagProxy
    var proxyHttp = new Ext.data.HttpProxy({ url: 'Test.aspx' });

    //ScriptTagProxy測試,跨域處理
    var proxyTag = new Ext.data.ScriptTagProxy({ url: 'Test.aspx' });
    //后台處理：
    //string str=request.getParameter("callback");//回調函數的方法名
};

9.Ext.data.ArrayReader的創建使用(Reader包括:ArrayReader\JsonReader\XmlReader)

//Ext.data.ArrayReader
function testArrayReader() {
    var data = [['id1', 'name1'], ['id2', 'name2']]; //數據格式

    var reader = new Ext.data.ArrayReader({ id: 1 }, [//ArrayReader不支持分頁
            {name: 'name', mapping: 1 }, //可以使用mapping指定對應列號
            {name: 'id', mapping: 0}//如果字段的順序和輸出一致不需指定mapping
            ]);
}

10.Ext.data.JsonReader的創建使用(在對於嵌套內容的顯示控制很不錯)

//JsonReader
function testJsonReader() {
    var data = {//數據格式
        id: 0, totalProperty: 2, //totalProperty為記錄總數,
        successProperty: true, //successProperty為調用是否成功,在不希望JSON數據處理的,設置為false
        root: [{ id: 'id1', name: 'name1' }, { id: 'id2', name: 'name2'}]
    };

    var reader = new Ext.data.JsonReader({
        id: 'id',
        root: 'root',
        totalProperty: 'totalProperty',
        successProperty: 'successProperty'
    }, [
            { name: 'id', mapping: 'id' }, //mapping數據顯示格式一致可以不用,如需改變修改即可
            {name: 'name', mapping: 'name' }
            ]);

    var data1 = {//嵌套的內部屬性映射需要顯示的內容
        id: 0, totalCount: 2, successState: true,
        indata: [
                { id: 'id1', name: 'name1', person: { id: 1, name: 'man', sex: 'male'} },
                { id: 'id2', name: 'name2', person: { id: 2, name: 'woman', sex: 'female'} }
                ]
    };
    var jsonReader = new Ext.data.JsonReader({
        id: 'id', root: 'indata', totalProperty: 'totalCount', successProperty: 'successState'
    }, [
            'id', 'name', //mapping根據嵌套的內部屬性映射需要顯示的內容
            {name: 'person_name', mapping: 'person.name' },
            { name: 'person_sex', mapping: 'person.sex' }
            ]);
}

11.Ext.data.XmlReader的創建使用

//XMLReader
function testXMLReader() {
    //其數據格式參見：XMLData.xml
    var reader = new Ext.data.XmlReader({
        id: 'id',
        success: 'success',
        totalRecords: 'totalRecords', //數據記錄總數
        record: 'record'//標簽為需要顯示的數據
    },
            ['id', 'name', 'descn']
            );
}
//JS拼接數據
function testJSXmlReader() {
    //將XML數據處理為js的data數據格式
    var data = "<?xml version='1.0' encoding='utf-8'?>" +
            "<dataset>" +
            "<id>1</id>" +
            "<totalRecords>2</totalRecords>" +
            "<success>true</success>" +
            "<record>" +
                "<id>1</id>" +
                "<name>name1</name>" +
                "<descn>descn1</descn>" +
            "</record>" +
            "<record>" +
                "<id>2</id>" +
                "<name>name2</name>" +
                "<descn>descn2</descn>" +
            "</record>" +
            "</dataset>";

    var xdoc;
    if (typeof (DOMParser) == 'undefined') {
        xdoc = new ActiveXObject('Microsoft.XMLDOM');
        xdoc.async = 'false';
        xdoc.loadXML(data);
    } else {
        var domParser = new DomParser();
        xdoc = domParser.parseFromString(data, 'application/xml');
        domParser = null;
    }

    var proxy = new Ext.data.MemoryProxy(xdoc);
    var reader = new Ext.data.XmlReader({
        id: 'id',
        success: 'success',
        totalRecords: 'totalRecords',
        record: 'record'
    }, ['id', 'name', 'descn']);

    var ds = new Ext.data.Store({
        proxy: proxy,
        reader: reader
    });
}

12.常用Store組合(SimpleStore和JsonStore)

//Store組合
function store() {
    //SimpleStore=Store+MemoryProxy+ArrayReader
    //簡化讀取本地數組
    var simpleStore = new Ext.data.SimpleStore({
        data: [
                        ['id1', 'name1', 'descn1'],
                        ['id2', 'name2', 'descn2']
                       ],
        fields: ['id', 'name', 'descn']
    });

    //JsonStore=Store+HttpProxy+JosnReader
    //從后台讀取JSON數據簡單方法
    var jsonStore = new Ext.data.JsonStore({
        url: 'Test.aspx',
        root: 'root',
        fields: ['id', 'name', 'descn']
    });
}