转载:https://www.cnblogs.com/SanMaoSpace/archive/2013/02/05/2893352.html
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']
});
}
Ext Store操作 一 基本操作
前提
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var data = {
users: [
{
id: 1,
name: 'Ed Spencer'
},
{
id: 2,
name: 'Abe Elias'
},
{
id: 3,
name: 'Abe Eli33as'
}
]
};
var mystore = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
var multiSelect={
id:'multiselect',
height:210,
width:325,
xtype: 'multiselect',
valueField: 'id', //相当于在select->option中 key值,store里为对象,需要指定值,
displayField: 'name', //相当于在select->option中 label值,store里为对象,需要指定值,
name: 'multiselect',
allowBlank: false,
store: mystore,
value: [1,2], //显示选中的值
ddReorder: true
};
1 记录的添加
var index=3;
var addUserBtn = Ext.createWidget('button', {
text: 'Add',
width:60,
handler: function () {
index = index+1;
mystore.add( {id:index,name:"jack"+index}); //添加对象
}
});
2 记录获取
//取得选中的keys值,所得的值为数组
var values= Ext.getCmp("multiselect").getRawValue() ;
//取得选中的对象(复数)
var selectObjs = Ext.getCmp("multiselect").boundList.getSelectionModel().getSelection();
//循环访问store 方法一
var length = mystore.getCount( );
for(var i=0;i< length;i++){
alert( mystore.getAt(i).get("id") ); //mystore.getAt(i) 取得一条记录 get("id") 取得记录的某个字段值
}
//循环访问store 方法二
mystore.each(
function(record){
alert(record.get("id"));
}
);
3 记录移除
方法1
mystore.each(
function(record){
if(values[i]==record.get('id')){
mystore.remove(record);
}
}
);
方法二
mystore.remove( Ext.getCmp("multiselect").boundList.getSelectionModel().getSelection());
---------------------
作者:pcjavanet
来源:CSDN
原文:https://blog.csdn.net/moliqin/article/details/7098999
版权声明:本文为博主原创文章,转载请附上博文链接!