extjs中JsonStore介绍

最新推荐文章于 2020-09-29 15:52:12 发布

iteye_18684

最新推荐文章于 2020-09-29 15:52:12 发布

阅读量714

点赞数

文章标签： EXT json JavaScript 脚本 PHP ViewUI

本文链接：https://blog.csdn.net/iteye_18684/article/details/81965348

版权

1 var store=new Ext.data.JsonStore({ data:"这里是你保存数据的变量,本地数据", url:"如果是从服务端获得数据，则填写服务端地址,如果是本地数据则不需要此属性", field:["这里是字段的名如{name:"字段名"}"]});store.getAt("第几条数据").get("字段名") //获得data里的数据store.getCount() //获得数据总共有多少条store.getTotalCount() //获得TotalCount 至于获得 code、uesr 值,API里好象没有介绍

2

var store = new Ext.data.JsonStore({ url:thisForm.action +"?method=childTheme", root: 'datalist', fields: ['title', 'username','loginTimes'] }); var aaa0 = store.load();

获取title的数据：store.getAt(0).get('title')
要循环遍历：store.each(function(record){});

3

设置HTML
复制以下的内容到HTML文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Ext.PropertyGrid with JsonStore</title>
<link type="text/css" rel="stylesheet" media="all" href="lib/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext-2.2/ext-all-debug.js"></script>
</head>
<body>

<div id="grid-ct"></div>

</body>
</html>
非常简单的页面，当中一div元素是为Property Grid渲染所做好准备，现在我们设定JavaScript……

设置JavaScript
把以下内容复制到script标签，或外置的（js）文件。

Ext.onReady(function(){

var propertyGrid = new Ext.grid.PropertyGrid({
title: 'Properties Grid',
id: 'propGrid',
autoHeight: true,
width: 300,
renderTo: 'grid-ct',
source: {} // 初始化数据源的配置对象
});

var propertyStore = new Ext.data.JsonStore({
autoLoad: true, //自动加载数据
url: 'getproperties.php',
root: 'props',
fields: ['First name', 'Last name', 'E-mail'],
listeners: {
load: {
fn: function(store, records, options){
// 获取propety grid组件
var propGrid = Ext.getCmp('propGrid');
// 保证property grid是存在的
if (propGrid) {
// 获得property grid 的store数据
propGrid.setSource(store.getAt(0).data);
}
}
}
}
});
});
Ext.onReady事件一触发，以上脚本就创建PropereyGrid和JsonStore两个对象，后者用于提供数据源。或许你会从Complex布局（layout）中的例子中见识过Property Grid的代码，这里的源码和例子的基本一致，除了配置项对象和id就有改变。在该例子中，配置项对象在初始化的时候还未设置。

JsonStore设置为自动加载数据（antoload:true）,并加入“load”事件，原理是数据加载后立即传递到Property。有不同的方式方法从JsonStore加载数据，但似乎这是一种比较“懒”的方式。

到此我们完成了脚本部份的设置，以下则是后台方面的……

设置后台
为了让数据可被正确地读取，必须以特定恰当的方式变换之。

就以当前服务端生成的JSON文本为例子，说明是如何输进JSON的：

{"props":[
{
"First name":"John",
"Last name":"Smith",
"E-mail":"jsmith@smith.com"
}
]}
正如所见，单单一个对象（object）它就包含一数组在内。通常的时候，像Grid Panel的组件其数据对象是由多个记录组成一个数组的，但这里因为是Proerty Grid的原因只有一个记录在数组中。

也应该如此了。当页面进行加载，数据将被载入Store对象，并传达到Properey Grid组件，只要后台设置无误就行。本文件的例子也可超松地配置为其它类型的Store。