先写个Json数据吧
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![](http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
{"result": [
2![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
3![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
4![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
5![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
6![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"},
7![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{"username": "kejiangwei", "password":"123", "email":"kejiangwei@163.com"}
8
], "totalCount":6}
用OO的思想去写JS
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->
1![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
TestGrid = function(config)
{
2![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
config = config ||
{};
3
4
this.cm = new Ext.grid.ColumnModel([
5![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{
6
header: 'UserName',
7
dataIndex: 'username',
8
width : 80
9![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
10
header: 'Password',
11
dataIndex: 'password',
12
width: 80
13![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
},
{
14
header: 'Email',
15
dataIndex: 'email',
16
width: 100
17
}
18
]);
19
20![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.reader = new Ext.data.JsonReader(
{
21
root : 'result',
22
totalProperty : 'totalCount',
23
fields : [
24![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'username'},
25![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'password'},
26![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
{name: 'email'}
27
]
28
});
29
30
31![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
this.store = new Ext.data.Store(
{
32
url: 'data.json',
33
// proxy: new Ext.data.MemoryProxy({url: 'data.json'}),
34
reader:this.reader
35
});
36
37
this.store.load();
38
39
// this.data = [
40
// ["kejiangwei","123","kejiangwei@163.com"]
41
// ];
42
// this.store = new Ext.data.ArrayStore({
43
// fields : [
44
// {name: 'username'},
45
// {name: 'password'},
46
// {name: 'email'}
47
// ]
48
// });
49
//
50
// this.store.loadData(this.data);
51![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
// var cm = new Ext.grid.ColumnModel([
53
// {
54
// header: 'UserName',
55
// dataIndex: 'username',
56
// width : 80
57
// }, {
58
// header: 'Password',
59
// dataIndex: 'password',
60
// width: 80
61
// }, {
62
// header: 'Email',
63
// dataIndex: 'email',
64
// width: 100
65
// }
66
// ]);
67
//
68
// var reader = new Ext.data.JsonReader({
69
// root : 'result',
70
// totalProperty : 'totalCount',
71
// fields : [
72
// {name: 'username'},
73
// {name: 'password'},
74
// {name: 'email'}
75
// ]
76
// });
77
//
78
//
79
// var store = new Ext.data.Store({
80
// url: 'data.json',
81
//// proxy: new Ext.data.MemoryProxy({url: 'data.json'}),
82
// reader:reader
83
// });
84
//
85
// store.load();
86
87![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
Ext.applyIf(config,
{
88
width : 300,
89
height : 250//,
//用this的话这些就不用配了上面已经配好了 这样 简单 好
90
// store : store,
91
// cm : cm
92
});
93
94
TestGrid.superclass.constructor.call(this, config);
95
}
96![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.extend(TestGrid, Ext.grid.GridPanel,
{});
97![](http://www.cnblogs.com/Images/OutliningIndicators/None.gif)
98![](http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
Ext.onReady(function()
{
99
100
var test = new TestGrid();
101
test.render("div_main");
102![](http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
103
});
用Var 和用this的不同。在上面有标注了 也有例子对比
在写个测试页吧
![](http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="TestGrid.js"></script>
</head>
<body>
<div id="div_main"></div>
</body>
</html>
分享到:
相关推荐
Jtopo读取Json生成树状拓扑图,Json结构如下,可添加业务需要字段 // id 节点唯一标识 // name 节点名字 // type 节点类型 // pid 父节点标识 // error “0”无异常 “1”有异常 // errorMessage 异常...
3. **定义数据读取器(Reader)**:数据读取器负责解析服务器返回的JSON数据。对于JSON格式,通常使用`Ext.data.reader.Json`,设置`rootProperty`来指定JSON对象中的数据数组位置。 4. **加载数据**:一旦数据存储...
这个对象能够加载JSON数据,并提供了一种灵活的方式来操作和绑定数据到组件。首先,你需要定义一个Store,包括其配置项如URL(指向后端接口的路径)和模型(Model,定义了数据的结构): ```javascript var store =...
Struts2 Action查询数据库,将查询结果转化为JSON,EXT接收到JSON数据后,将其渲染成表格或其他UI元素显示给用户。 3. **更新(Update)**:用户编辑记录后,EXT会将修改后的数据以JSON格式发送给服务器。Struts2 ...
在Java和EXT之间传输数据时,JSON扮演着关键角色。Struts2有一个JSON插件,它可以轻松地将Java对象转换为JSON格式,供EXT前端解析和显示。 在CRUD操作中: - **创建(Create)**:用户通过EXT界面填写新记录的信息...
它支持JSON数据模型,可以方便地从服务器获取JSON数据,然后在前端渲染成可交互的界面元素,如表格、图表等。 JSP(JavaServer Pages)是Java Web开发中的视图技术,用于生成动态网页。在JSON上下文中,JSP可以用来...
在本篇ExtJs学习资料中,我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务,特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 ...
2. 定义`TreeStore`,配置Ajax数据源,读取JSON数据。 3. 创建`TreeNodeModel`描述树节点的数据结构。 4. 创建`Ext.tree.Panel`,关联`TreeStore`,设置显示和交互选项。 5. 监听和处理EXT树控件的事件,如`...
同时配置了XML数据读取器,用于解析返回的XML数据。 3. **检测加载状态**: ```javascript function storeIsLoading() { if (xmlStore.isLoading()) { window.setTimeout(function () { storeIsLoading(); },...
总结来说,Ext.data是Ext_JS框架中处理数据的核心部分,它提供了强大的数据存储、读取和传输能力。通过灵活的Store、Reader和Proxy机制,开发者可以轻松地从各种数据源获取数据并呈现给用户。同时,Ext.data....
文件名“JsonExt”表明例子可能涉及到EXT与JSON数据格式的交互。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,非常适合在JavaScript和服务器之间传输数据。EXT支持直接处理JSON数据,因为它们...
根据这两个参数构建JSON数据,并通过`response.getWriter().write(json)`将JSON数据返回给JavaScript端。 #### 4. **关键代码片段解读** ```javascript var ds = new Ext.data.Store({ proxy: new Ext.data....
本文将详细探讨"Java Ext2.0数据交互"这一主题,包括如何进行增删改查操作以及如何处理XML文件。 首先,Ext2.0是Ext JS的一个版本,它是一个强大的JavaScript库,用于构建桌面级的Web应用。它提供了丰富的组件库,...
对于远程数据,通常会使用Ajax请求(DWR或者Ext.Ajax)从服务器获取JSON或XML格式的数据。 更新(Update):当用户修改了数据,Store会自动检测到这些变化。调用`sync()`方法会将更新后的数据发送回服务器,后台...
1. **解析JSON**:json-c提供了函数如`json_object_from_file()`和`json_tokener_new()`,可以读取JSON格式的文件或字符串,并将其转换为内部表示的JSON对象。 2. **生成JSON**:通过`json_object_to_json_string()`...
在ExtJS中,proxy是连接数据源和Store之间的桥梁,用于处理数据的读取、写入和删除操作。由于这是一个本地数据示例,因此没有实际向服务器发送请求,而是直接使用了"data"作为数据源。这意味着数据已经预先存在于...
这里,`params`对象中的`data`键值对包含了要发送的JSON数据,`Ext.encode`函数负责将其转换为JSON格式。 在PHP端,由于JSON数据是作为字符串提交的,因此我们不能简单地通过`$_POST['data']`来获取。我们需要使用`...
4. **服务器端模板引擎**:如Thymeleaf、Freemarker等,可以在服务器端渲染HTML页面时动态生成JSON数据。 ### 结论 将数据库查询结果转换为JSON是现代Web应用中常见的需求,它涉及到前端展示、后端处理以及数据格式...
1. **格式化JSON数据**:将查看结果树中的响应数据复制到bejson等在线格式化工具中,确保其格式正确无误。 2. **定位目标数据**:根据需要验证的数据位置,构建合适的JSON路径表达式。比如,我们需要验证出版日期`...
数据通常存储在`Ext.data.Store`对象中,我们可以通过JSON数据或者服务器请求填充数据。在这个场景下,左侧表格的数据应预先存在于`leftStore`,右侧表格的数据存储在`rightStore`。 3. **用户交互**: 我们需要...