extjs中的store
1.store中重要的属性和方法
属性:data、proxy、reader、url、root ....
方法:load
2.理解:data--原料,proxy--运输车,reader--加工厂,store--仓库。入库后等待给grid使用。
Ext.onReady(function(){
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'}
]);
var data = [
['boy', 0],
['girl', 1]
];
var store = new Ext.data.Store({ //使用Store时要配置proxy,和reader
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'}
],
autoHeight: true,
renderTo: 'grid'
});
});
3.SimpleStore = Store + MemoryProxy + ArrayReader.
4.JsonStore = Store + HttpProxy + JsonReader.
5.如果配置了data,则proxy和url无效,且不需要调用load方法来生成Record集合
var ds = new Ext.data.SimpleStore({
data: [
['id1','name1','descn1'],
['id2','name2','descn2']
],
fields: ['id','name','descn']
});
6.如果没有配置data,则必须设置proxy或url,或两者都设置。此时,如果没有将autoLoad设置为true,那么需要手动进行load方法的调用。
<script type="text/javascript">
Ext.onReady(function(){ var store = new Ext.data.JsonStore({
autoDestory:true,
data:{ 'results': 2, 'rows': [
{ 'id': 1, 'name': 'Bill', occupation: 'Gardener' },
{ 'id': 2, 'name': 'Ben', occupation: 'Horticulturalist' }
]},
storeId: 'storeId01',
root:"rows",
fields: [
{name: 'id', mapping:'id'},
{name: 'name', mapping:'name'},
{name: 'occupation', mapping:'occupation'},
]
}); var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
store: store,
columns: [
{header: "id", width: 200, sortable: true,dataIndex: 'id'},
{header: "name", width: 200, sortable: true,dataIndex: 'name'},
{header: "occupation", width: 200,sortable: true, dataIndex: 'occupation'}
],
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load(); });
</script>
extjs中的store的更多相关文章
- Extjs中Store小总结
http://blog.csdn.net/without0815/article/details/7798170 1.什么是store? Store类似于一个本地仓库(即数据存储器),包括有 Arra ...
- EXTJS中grid的数据特殊显示,不同窗口的数据传递
//EXTJS中grid的数据特殊显示renderer : function(value, metaData, record, rowIndex, colIndex, store, view) { v ...
- [转]ExtJS之遍历Store
原文地址:http://blog.sina.com.cn/s/blog_67cc6e7d0100ox6u.html ExtJS中,一般很少需要遍历Store,因为它的selectModel很好用,无论 ...
- Extjs中给同一个GridPanel中的事件添加参数的方法
Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({ text:'启用', scope ...
- extjs中的下载并对文件重命名功能的实现
在小白的学习extjs的过程中,如果需要了解多文件的上传功能,也可以查看小白的上篇随笔,希望给大家帮助.http://www.cnblogs.com/wangqc/p/extjsFileUpload. ...
- 转: ExtJS中xtype一览
转: ExtJS中xtype一览 基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycl ...
- extjs中第一次访问有效,第二次访问出现部分组件无法显示的,动态改变组件的label值的方法,ExtJs中组件最好少使用ID属性(推荐更多使用Name属性)
在公司做的一个OA项目中,曾经就遇到了这样的一个问题:(我是在jsp中的div中将js render到div中去的)第一次访问此界面的时候,formpanel上的组件能正常显示,不刷新整个页面的前提下 ...
- Extjs4中的store
Extjs 4引入新的数据包,其中新增了不少新类并对旧有的类作出了修整.使数据包更强大和更容易使用. 本章我们将学习一下内容: 2.1. 概述新特性 Extjs4的数据包引入了如Mod ...
- extJS 中 ext.data 介绍
ext.data 最主要的功能是获取和组织数据结构,并和特定控件联系起来,于是,Ext.data成了数据的来源,负责显示数据. Ext.data在命名空间中定义了一系列store.reader和pro ...
随机推荐
- urllib 基础模块
(1) urllib.request:最基本的HTTP请求模块,用来模拟发送请求,就像在浏览器里输入网址然后回车一样(2) urllib.error:异常处理模块,如果出现请求错误,我们可以捕获这些异 ...
- Struts在Web.xml中的配置及Struts1和Struts2的区别
(1)配置Struts的ActionServlet <servlet>元素来声明ActionServlet <servlet-name>元素:用来定义Servle ...
- ida+windbg调试windows
jpg 改 pdf https://www.hex-rays.com/products/ida/support/tutorials/debugging_windbg.pdf
- C# mvc 500 内部服务器访问异常
20161018 项目发布到IIS上后,无法访问,由于页面默认跳转到异常处理去了,所以详细信息一直查看不了. 在找寻无果,异常信息日志记录无效的情况下,只好一点点来测试了 在异常处理前,就已经试过,a ...
- open-falcon之agent
功能 采集数据,解析数据,上报数据至transfer 基本涵盖了系统层面监控指标,直接将数据转换为metricValue形式,上报至transfer 支持插件采集,代码插件放可受git管理,放置在pl ...
- Find–atime –ctime –mtime的用法与区别总结
转自 周五有同事问起find命令中-mtime n.-mtime –n以及-mtime +n的用法区别,当时虽然记得这里n是n个24个小时的意思,也是对所有这几个属性详细的用法却一知半解,索性周末仔细 ...
- vue工具 - vue-cli安装使用流程
1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V 大写V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自 ...
- LeetCode——Implement Trie (Prefix Tree)
Description: Implement a trie with insert, search, and startsWith methods. Note:You may assume that ...
- 原生js--userData
userData是IE5及其以上浏览器支持的一种客户端存储方式,它通过在document元素后面附加一个专属的元素来实现. 对userData的封装: /** * IE userdata封装 */fu ...
- Android手机资料拷贝导出工具 --- 91手机助手
http://zs.91.com/