ExtJs开发教程_001_Ext.data.Store使用方法详解
本系列教程基本可以看做是ExtJS API中文版+实例演示
更多内容请参看：http://www.cnblogs.com/mrye
Ext.data.Store 用法介绍
这个组件继承自Ext.data.AbstractStore
本篇讲解了如何构造并且做一些基本使用，如果有什么疑问可以联系我QQ1330771552
下面是他的属性列表
autoLoad
//是否自动加载
autoSync
//是否自动同步
buffered
//允许缓冲（官方有个5000条数据的例子可以参看）
clearOnPageLoad
//是否在加载新数据的时候清空旧数据
clearRemovedOnLoad
//加载的时候把删除掉的数据彻底删除（所谓删除掉的数据是指store.remove（））
data
//数据
fields
//解析数据的字段
filters
//过滤器（可以参看Ext.util.Filter和Ext.ux.grid.filter.Filter）
groupDir
groupField
//用哪一个字段分组
leadingBufferZone
//缓冲的情况下，最多缓冲多少行
listeners
//监听器，可以指定各种on事件
model
//解析数据的模型，模型可以代替proxy和fields配置
pageSize
//每页显示多少条数据
proxy
//数据代理（其实就是发送ajax来请求数据用的）
purgePageCount
//多少页清除一次缓存数据（具体是和缓冲结合使用，本文不介绍缓冲）
remoteFilter
//这个属性会往服务器发送过滤条件
remoteGroup
//往服务器发送分组条件（同上，做法就是表单参数提交到后台）
remoteSort
//往后台发送排序条件
sortOnFilter
//排序的时候进行过滤
storeId
//唯一标示，让Ext.data.StoreManager来管理用的
trailingBufferZone
//缓冲多少条
|
// 本页的全局pageSize
var
PAGESIZE = 20;
var
demoStore = Ext.create(
'Ext.data.Store'
, {
// fields一定要明确指定type，这样有很多好处，比如filter能直接设为true，便会默认按照store-fields设置好的type来确定filter的类型。
fields : [{
name :
'primaryKey'
,
type :
'int'
},{
name :
'price'
,
type :
'float'
}, {
name :
'productName'
,
type :
'string'
}, {
name :
'title'
,
type :
'string'
}, {
name :
'buyDate'
,
type :
'date'
,
dateFormat :
'Y-m-d'
// 此处可以避免IE下日期出现错误nan
}],
// 数据代理服务
proxy : {
type :
'ajax'
,
// 使用ajax请求
url :
'/read/demo/product.action'
,
// 请求后台读取数据的地址
// 读取数据的工具（数据代理）
reader : {
// 读取方式按照json字符串格式读取
type :
'json'
,
// json解析成js对象之后读取所有数据（通常是数组）的属性名称。
root :
'root'
,
// json解析成js对象之后读取数据总条数的属性名称
totalProperty :
'totalProperty'
}
},
// 自动加载
autoLoad :
true
,
// 每页显示多少条
pageSize : PAGESIZE
});
// 商品grid
Var demoGrid = Ext.create(
'Ext.grid.Panel'
, {
// 不要边框能好看一些
border :
false
,
//用来进行选择的选择器
selModel : Ext.create(
'Ext.selection.CheckboxModel'
),
// 所使用的数据源
store : renYuanStore,
// 创建列详细可以参看renYuanColumns函数
columns : renYuanColumns(),
// 需要分页、全显示按钮
pageChange :
true
,
// 底部toolbar，不需要进行后处理。所以使用“匿名类”
bbar : [{
// 控件类型pagingtoolbar
xtype :
'pagingtoolbar'
,
// 这个属性好像在extAPI中没写，但是不写还不行。能控制ProgressBarPager。不然ProgressBarPager会出bug
pageSize : PAGESIZE,
// 所使用的数据源
store : renYuanStore,
// 因为Ext.ux.LiveSearchGridPanel默认把tbar和bbar占用了。所以只能使用dockedItems添加toolbar
dock :
'bottom'
,
// 插件，使用ProgressBarPager插件，显示进度条
plugins : Ext.create(
'Ext.ux.ProgressBarPager'
)
}],
// 添加双击编辑事件监听器
listeners : {
itemdblclick :
function
() {
// editBtn是编辑按钮。此处做法目的是双击数据进行编辑
editBtn.handler();
}
}
});
|
该组件相当于一个数据源，能够给很多呈现数据的组件提供数据。
核心工作过程是：
首先请求后台读取数据，接受后台返回的数据（其实就是个字符串）
然后按照指定格式解析数据。通常默认格式为json
我们可以自定义解析规则。详细参看Ext.data.reader.Reader
最后把解析好的数据转换成Ext.data.Model实例
我们可以自定义模型。
Ext.define(
'User'
, {
extend:
'Ext.data.Model'
,
fields: [
{name:
'name'
, type:
'string'
},
{name:
'age'
, type:
'int'
, convert:
null
},
{name:
'phone'
, type:
'string'
},
{name:
'alive'
, type:
'boolean'
, defaultValue:
true
, convert:
null
}
],
changeName:
function
() {
var
oldName =
this
.get(
'name'
),
newName = oldName +
" The Barbarian"
;
this
.set(
'name'
, newName);
}
});
|
通常重复打开定义了Ext.data.Model的页面（就是加载js）会出现一个错误，大致意思是说，重复定义某个类了。
我们可以这样避免这个问题
Var exitModel=Ext.ModelManager.get(‘modelId’)
//此处modelId是你自己给自己定义的model指定的ID。('User')
|
//如果不知道exitModel是什么类型，为什么可以直接取反，请参看js基础（js中 nan，undifined，null，0，‘’都是互通的）
|
If(!exitModel){
|
//TODO 在这里定义你的model <br>}
|
自定义模型之后就可以使用该模型来构造store
改写上面的store
Ext.define(
'ProductModel'
, {
extend:
'Ext.data.Model'
,
fields: [{
name :
'primaryKey'
,
type :
'int'
},{
name :
'price'
,
type :
'float'
}, {
name :
'productName'
,
type :
'string'
}, {
name :
'title'
,
type :
'string'
}, {
name :
'buyDate'
,
type :
'date'
,
dateFormat :
'Y-m-d'
// 此处可以避免IE下日期出现错误nan
}]
});
var
demoStore = Ext.create(
'Ext.data.Store'
, {
model:
'ProductModel'
,
// 数据代理服务
proxy : {
type :
'ajax'
,
// 使用ajax请求
url :
'/read/demo/product.action'
,
// 请求后台读取数据的地址
// 读取数据的工具（数据代理）
reader : {
// 读取方式按照json字符串格式读取
type :
'json'
,
// json解析成js对象之后读取所有数据（通常是数组）的属性名称。
root :
'root'
,
// json解析成js对象之后读取数据总条数的属性名称
totalProperty :
'totalProperty'
}
},
// 自动加载
autoLoad :
true
,
// 每页显示多少条
pageSize : PAGESIZE
});
|
写上面的store，这样是不是比原来简单多了，而且更清晰了。
其实proxy属性也可以定义在model中。
只是通常不建议这么做。因为模型就是模型，他的数据代理是数据源赋予的。这样也能让我们的程序中，可以定义很多的模型，然后根据需要选择模型来搭配代理，从而为同一个模型赋予不同的后台读取操作。
针对store的各种方法合理使用，我会根绝需要在后续篇章中进行讲解。
注：本篇持续更新，首版日期：2012年7月10日15:57:23 第一版
PS:近期会出一套关于ExtJs动态form动态grid的相关教程。2012年7月10日16:19:54