本系列教程基本可以看做是ExtJS API中文版+实例演示
更多内容请参看:http://www.cnblogs.com/mrye
Ext.data.Store 用法介绍
这个组件继承自Ext.data.AbstractStore
本篇讲解了如何构造并且做一些基本使用,如果有什么疑问可以联系我QQ1330771552
下面是他的属性列表
autoLoad
autoSync
buffered
clearOnPageLoad
clearRemovedOnLoad
data
fields
filters
groupDir
groupField
leadingBufferZone
listeners
model
pageSize
proxy
purgePageCount
remoteFilter
remoteGroup
remoteSort
sortOnFilter
storeId
trailingBufferZone
|
var PAGESIZE = 20;
var demoStore = Ext.create( 'Ext.data.Store' , {
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'
}],
proxy : {
type : 'ajax' ,
url : '/read/demo/product.action' ,
reader : {
type : 'json' ,
root : 'root' ,
totalProperty : 'totalProperty'
}
},
autoLoad : true ,
pageSize : PAGESIZE
});
Var demoGrid = Ext.create( 'Ext.grid.Panel' , {
border : false ,
selModel : Ext.create( 'Ext.selection.CheckboxModel' ),
store : renYuanStore,
columns : renYuanColumns(),
pageChange : true ,
bbar : [{
xtype : 'pagingtoolbar' ,
pageSize : PAGESIZE,
store : renYuanStore,
dock : 'bottom' ,
plugins : Ext.create( 'Ext.ux.ProgressBarPager' )
}],
listeners : {
itemdblclick : function () {
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’)
|
自定义模型之后就可以使用该模型来构造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'
}]
});
var demoStore = Ext.create( 'Ext.data.Store' , {
model: 'ProductModel' ,
proxy : {
type : 'ajax' ,
url : '/read/demo/product.action' ,
reader : {
type : 'json' ,
root : 'root' ,
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
分享到:
相关推荐
_Ext.JS.4.First.Look_第1版__._Ext.JS.4.First.Look_.Loiane.Groner.文字版
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url}); this....
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
extjs_cook_book_Code.zip
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
ExtJS_4_官方指南:MVC架构_简体中文版归纳.pdf
fmsoft_unigui_extjs_0.89.0.956_setup.956_setup.rar
ExtJS_4_官方指南:MVC架构_简体中文版整理.pdf
fmsoft_unigui_extjs_0.90.0.968_setup.exe
6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...
ExtJs 文学馆oa系统开发 包括了Extjs开发中的大多数功能 附件上传 数据日志 权限管理 各种模块的增删改查 非常高端的实际开发项目
fmsoft_unigui_extjs_0.96.0.1065_setup.exe
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径 支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail....
ExtJS_OA_System.rar是一个用ExtJs写的一个系统!! 可以参考!!
6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data.Connection篇二 24 12. Ext.Updater篇一 26 13. ...
asp.net与extjs开发点卡在线销售系统__(0521).rar
ExtJs学习资料28-Ext.data.JsonStore数据存储器
EXTJS实用开发指南_个人整理笔记.pdf
ExtJs框架系列之图片批量显示,上传,删除.rarExtJs框架系列之图片批量显示,上传,删除.rar