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