ExtJS-数据处理-配置Store类型实例
更新记录
2022年7月14日 发布。
2022年7月6日 从笔记迁移到博客。
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
实例-配置Store类型
实例：自定义Store
继承自Ext.data.Store类型即可
Ext.define('PandaApp.store.PandaStore', {
extend: 'Ext.data.Store',
});
实例：配置StoreId
使用storeId配置项即可
var myStore = Ext.create('Ext.data.Store', {
storeId: 'pandastore',
});
实例：配置关联Model
直接使用model配置项即可
//定义Model
Ext.define('PandaApp.model.PandaModel', {
extend: 'Ext.data.Model',
});
//定义Store
Ext.define('PandaApp.store.PandaStore', {
extend: 'Ext.data.Store',
model: 'PandaApp.model.PandaModel', //关联Model
});
实例：配置自动加载
使用autoLoad配置项即可
注意：If you set autoLoad to true, then the load method will be called automatically
Ext.define('PandaApp.store.PandaStore', {
extend: 'Ext.data.Store',
autoLoad: true,
});
实例：配置自动同步
使用autoSync配置项即可
Ext.define('PandaApp.store.PandaStore', {
extend: 'Ext.data.Store',
autoSync: true,
});
实例：配置直接内联fields（不建议）
直接使用fields配置项即可
注意：这不是一个良好的实践，生产环境不建议使用
//定义Store
Ext.define('PandaApp.store.PandaStore', {
extend: 'Ext.data.Store',
fields: [ //直接设置fields
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' }
]
});
实例：配置数据过滤
数据存储支持在本地和远程执行排序、筛选和分组
要使用远程排序和远程筛选器，可以将remote sort和remote filter设置为true
注意：远程排序和远程筛选器设置为true，则必须在服务器端执行筛选和排序，并将筛选和排序后的数据返回给客户端（可能会有延迟）
使用filters配置项即可
Ext.define('PandaApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
],
filters: [ //过滤器
{
property: 'Name',
value: 'Panda'
}
]
});
还支持正则匹配
var myStore = Ext.create('Ext.data.Store', {
model: 'Employee',
filters: [{
property: 'firstName',
value: /an/
}]
});
实例：配置数据排序
数据存储支持在本地和远程执行排序、筛选和分组
要使用远程排序和远程筛选器，可以将remote sort和remote filter设置为true
注意：远程排序和远程筛选器设置为true，则必须在服务器端执行筛选和排序，并将筛选和排序后的数据返回给客户端（可能会有延迟）
使用sorters配置项即可
Ext.define('Ext.data.Store', {
model: 'Employee',
sorters: [
{
property: 'firstName',
direction: 'ASC'
},
{
property: 'fulltime',
direction: 'DESC'
}
]
});
简单形式
Ext.define('Ext.data.Store', {
model: 'Employee',
sorters: [
'name','id'
]
});
实例：配置数据分组
使用grouper配置项定义分组
Ext.define('PandaApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
],
grouper: [ //配置分组
{
property: 'Name',
direction: 'ASC'
}
]
});
使用groupField和groupDir配置分组
Ext.define('PandaApp.model.User', {
extend: 'Ext.data.Model',
idProperty: 'Id',
fields: [
{ name: 'Id', type: 'int' },
{ name: 'Name', type: 'string' }
],
//配置分组
groupField: 'Name',
groupDir: 'ASC'
});
实例：配置直接内联数据
使用data配置项即可
var store2 = Ext.create('Ext.data.Store',{
fields: [
'userName',
'code'
],
data: [ //直接内联数据
['Panda', 666],
['Dog', 888],
['Cat', 222]
]
});
实例：配置直接内联数据2
如果不想将存储绑定到服务器或客户端存储（如浏览器本地存储）
可以直接对存储区中的内联数据进行硬编码
在内部，Store将我们作为数据传入的每个对象转换为适当模型类型的记录
Ext.create('Ext.data.Store', {
model: 'MyApp.model.Employee',
data: [{
firstName: 'Shiva',
lastName: 'Kumar',
gender: 'Male',
fulltime: true,
phoneNumber: '123-456-7890'
}, {
firstName: 'Vishwa',
lastName: 'Anand',
gender: 'Male',
fulltime: true,
phoneNumber: '123-456-7890'
}]
});
实例：配置直接内联数据3
new Ext.data.Store({
model: 'MyApp.model.User',
data: [
{ id: 1, name: "Philip J. Fry" },
{ id: 2, name: "Hubert Farnsworth" },
{ id: 3, name: "Turanga Leela" },
{ id: 4, name: "Amy Wong"}]
});
实例：配置代理（memory代理）
使用proxy配置项即可
var pandaStore = Ext.create('Ext.data.Store',{
model: 'PandaApp.model.User', //指定模型的类型
proxy: {
type: 'memory', //代理的类型：内存
reader: { //定义读取器
type: 'array', //指定读取器的类型
model: 'PandaApp.model.User' //指定模型的类型
}
}
});
实例：配置代理（memory代理）
Ext.define('PandaCMS.store.Personnel', {
extend: 'Ext.data.Store',
alias: 'store.personnel',
model: 'PandaCMS.model.Personnel',
data: {
items: [
{ name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" },
{ name: 'Worf', email: "worf.moghsson@enterprise.com", phone: "555-222-2222" },
{ name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" },
{ name: 'Data', email: "mr.data@enterprise.com", phone: "555-444-4444" }
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
实例：配置代理（localstorage代理）
注意：记得要配置id配置项
Ext.define('PandaApp.store.Users', {
extend: 'Ext.data.Store',
model: 'PandaApp.model.User',
proxy: {
type: 'localstorage',
id : 'users'
}
});
实例：配置代理（ajax代理）
var employeeStore = Ext.create('Ext.data.Store',{
fields: [ //设置Model的字段
{ name: 'id', type: 'int' },
'name',
'dateActive',
'numEmployees'
],
proxy:{ //设置代理的类型
type: 'ajax', //请求的类型
url: 'test.json', //请求数据的来源
reader: { //数据读取器JsonReader
type: 'json', //数据的类型
rootProperty: 'data', //JSON数据中的根节点名称
idProperty: 'id', //数据的id列名称
successProperty: 'meta.success' //JSON数据中成功指示节点名称
}
}
});
实例：配置代理（rest代理）
var myStore = Ext.create('Ext.data.Store', {
model: 'Employee',
storeId: 'mystore',
proxy: {
type: 'rest',
url: '/employee',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true,
autoSync: true
});
实例：配置代理（JSONP代理）
var myStore = Ext.create('Ext.data.Store', {
model: 'Products',
proxy: {
type: 'jsonp',
url : 'http://domain.com/products',
callbackKey: 'productsCallback'
}
});
实例：配置JSON读取器
proxy:{ //设置代理的类型
type: 'ajax', //请求的类型
url: 'test.json', //请求数据的来源
reader: { //数据读取器JsonReader
type: 'json', //数据的类型
rootProperty: 'data', //JSON数据中的根节点名称
idProperty: 'id', //数据的id列名称
successProperty: 'meta.success' //JSON数据中成功指示节点名称
}
},
实例：配置XML读取器
{
xtype: 'button',
proxy:{
type:'ajax',
url: 'serverside/customers.xml',
reader: {
type: 'xml',
rootProperty: 'data',
record: 'customer', //数据节点名称
totalProperty: 'total',
successProperty: 'success'
}
}
}
实例：配置JSON写入器
proxy: {
//...
writer: {
type : 'json',
writeAllFields: true,
transform : { //转换函数
fn: function(data, request) {
data.Email = data.Email.toLowerCase();
return data;
}
}
}
}
实例：配置XML写入器
实例：配置增删改查API
使用writer可以节省时间和精力，无需再编写Ajax请求和异常处理
要使用Writer，需要配置数据存储以及支持的代理
要创建一个配置对象api用于对接后端的增删改查操作
//创建Store
var requestUrlRoot = 'http://127.0.0.1/index.php/'; //请求的域名IP
var employeeStore = Ext.create('Ext.data.Store',{
fields: [ //设置Model的字段
{ name: 'id', type: 'int' },
'name',
'dateActive',
'numEmployees'
],
proxy: { //设置代理
type: 'ajax', //设置代理的类型
api: { //设置与后端关联的增删改查的API
create : requestUrlRoot + '/CREATE', //增
destroy: requestUrlRoot + '/DELETE', //删
update : requestUrlRoot + '/UPDATE', //改
read : requestUrlRoot + '/READ' //查
},
reader : { //设置读取器
type: 'json', //设置读取器的类型为JSONReader
rootProperty: 'data', //设置书的根节点
idProperty: 'id', //设置数据的Id列
successProperty: 'meta.success' //设置成功检测位
},
writer: { //设置写入器
type: 'json', //设置写入器的类型为JSONWriter
encode: true,
writeAllFields: true, //写入所有属性,实际环境中设置为false
rootPropertyoot: 'data', //设置根节点名称
allowSingle: true,
batch: false,
}
}
});
本文来自博客园，作者：重庆熊猫，转载请注明原文链接：https://www.cnblogs.com/cqpanda/p/16452731.html
