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 ...
随机推荐
- Selenium 节点交互
Selenium 可以驱动浏览器来执行一些操作,也就是说可以让浏览器模拟执行一些动作 常见方法:输入文字时用 send_keys() 方法,清空文字时用 clear() 方法,点击按钮时用 click ...
- 计算直线与WGS84椭球的交点
/************************************************************************/ /*线段与WGS84椭球求交 x^2/a^2+y^ ...
- LINUX网络之ifconfig命令与ping
ifconfig命令 网络配置 ifconfig命令被用于配置和显示Linux内核中网络接口的网络参数.用ifconfig命令配置的网卡信息,在网卡重启后机器重启后,配置就不存在.要想将上述的配置信息 ...
- codeforces水题100道 第八题 Codeforces Round #274 (Div. 2) A. Expression (math)
题目链接:http://www.codeforces.com/problemset/problem/479/A题意:给你三个数a,b,c,使用+,*,()使得表达式的值最大.C++代码: #inclu ...
- 《转载》图解Tomcat类加载机制
本文转载自http://www.cnblogs.com/xing901022/p/4574961.html 说到本篇的tomcat类加载机制,不得不说翻译学习tomcat的初衷. 之前实习的时候学习j ...
- myeclipse环境优化
在项目右键打开Project > Properties > BUILDERS,打开source的tab,选择你的目录,删之~重启myeclipse 以下转载自百度知道 优化一下,下面内容都 ...
- Yii 开发过程 tips
1. 查看DAO 生成的sql 结果(类似TP的 getLastSql): $reto = $edb->createCommand($bsql); echo $reto->text; 2. ...
- css方法 - 移动端reset汇总与注释
1.解决移动端触摸a元素,会有蓝色阴影 正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit- ...
- wps 批量调整图片大小 宏
Sub 批量调整图片大小() ' ' 批量修改图片 Macro ' 宏由 zxz 录制,时间: 2014/10/29 '批量调整图片大小,避免图片太大显示不完全 '循环图片集合 For Each iS ...
- iOS uitextfield长度限制
[textUsername addTarget:self action:@selector(textFieldDidChange:) forControlEvents:UIControlEventEd ...