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']
    });
}