`

Ext读取Json数据

阅读更多
先写个Json数据吧

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->1{"result": [
2    {"username""kejiangwei""password":"123""email":"kejiangwei@163.com"},
3    {"username""kejiangwei""password":"123""email":"kejiangwei@163.com"},
4    {"username""kejiangwei""password":"123""email":"kejiangwei@163.com"},
5    {"username""kejiangwei""password":"123""email":"kejiangwei@163.com"},
6    {"username""kejiangwei""password":"123""email":"kejiangwei@163.com"},
7    {"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 />-->  1TestGrid = function(config) {
  2    config = config || {};
  3    
  4    this.cm = new Ext.grid.ColumnModel([
  5        {
  6            header: 'UserName',
  7            dataIndex: 'username',
  8            width    : 80
  9        }
{
 10            header: 'Password',
 11            dataIndex: 'password',
 12            width: 80
 13        }
{
 14            header: 'Email',
 15            dataIndex: 'email',
 16            width: 100
 17        }

 18    ]);
 19    
 20    this.reader = new Ext.data.JsonReader({
 21        root    : 'result',
 22        totalProperty    : 'totalCount',
 23        fields    : [
 24            {name: 'username'},
 25            {name: 'password'},
 26            {name: 'email'}
 27        ]
 28    }
);
 29    
 30    
 31    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
 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    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}

 96Ext.extend(TestGrid, Ext.grid.GridPanel, {});
 97
 98Ext.onReady(function(){
 99    
100    var test = new TestGrid();
101    test.render("div_main");
102
103}
);
用Var 和用this的不同。在上面有标注了  也有例子对比

在写个测试页吧
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生成树状拓扑图

    Jtopo读取Json生成树状拓扑图,Json结构如下,可添加业务需要字段 // id 节点唯一标识 // name 节点名字 // type 节点类型 // pid 父节点标识 // error “0”无异常 “1”有异常 // errorMessage 异常...

    EXT实例+JSON

    3. **定义数据读取器(Reader)**:数据读取器负责解析服务器返回的JSON数据。对于JSON格式,通常使用`Ext.data.reader.Json`,设置`rootProperty`来指定JSON对象中的数据数组位置。 4. **加载数据**:一旦数据存储...

    extjs读取解析后端json格式数据显示条形图

    这个对象能够加载JSON数据,并提供了一种灵活的方式来操作和绑定数据到组件。首先,你需要定义一个Store,包括其配置项如URL(指向后端接口的路径)和模型(Model,定义了数据的结构): ```javascript var store =...

    @@@java+struts2+ext+json(完整的示例程序)实现CRUD

    Struts2 Action查询数据库,将查询结果转化为JSON,EXT接收到JSON数据后,将其渲染成表格或其他UI元素显示给用户。 3. **更新(Update)**:用户编辑记录后,EXT会将修改后的数据以JSON格式发送给服务器。Struts2 ...

    java+struts2+ext+json(完整的示例程序)实现CRUD

    在Java和EXT之间传输数据时,JSON扮演着关键角色。Struts2有一个JSON插件,它可以轻松地将Java对象转换为JSON格式,供EXT前端解析和显示。 在CRUD操作中: - **创建(Create)**:用户通过EXT界面填写新记录的信息...

    JSON.rar_JSON Hibernate_extjs_json struts ext_jsp json extjs_str

    它支持JSON数据模型,可以方便地从服务器获取JSON数据,然后在前端渲染成可交互的界面元素,如表格、图表等。 JSP(JavaServer Pages)是Java Web开发中的视图技术,用于生成动态网页。在JSON上下文中,JSP可以用来...

    ExtJs学习资料22-从服务器获取JSON数据并分页处理.doc

    在本篇ExtJs学习资料中,我们探讨了如何从服务器获取JSON数据并进行分页处理。这是一项在Web应用程序中非常常见的任务,特别是在构建数据密集型界面时。下面我们将详细阐述实现这一功能的关键步骤和涉及的技术点。 ...

    ext 树控件+数据库

    2. 定义`TreeStore`,配置Ajax数据源,读取JSON数据。 3. 创建`TreeNodeModel`描述树节点的数据结构。 4. 创建`Ext.tree.Panel`,关联`TreeStore`,设置显示和交互选项。 5. 监听和处理EXT树控件的事件,如`...

    ext动态获取Xml数据并解析信息

    同时配置了XML数据读取器,用于解析返回的XML数据。 3. **检测加载状态**: ```javascript function storeIsLoading() { if (xmlStore.isLoading()) { window.setTimeout(function () { storeIsLoading(); },...

    深入浅出Ext_JS:数据存储与传输

    总结来说,Ext.data是Ext_JS框架中处理数据的核心部分,它提供了强大的数据存储、读取和传输能力。通过灵活的Store、Reader和Proxy机制,开发者可以轻松地从各种数据源获取数据并呈现给用户。同时,Ext.data....

    ext精典例子(增删改查)

    文件名“JsonExt”表明例子可能涉及到EXT与JSON数据格式的交互。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,非常适合在JavaScript和服务器之间传输数据。EXT支持直接处理JSON数据,因为它们...

    使用Json传值的示例

    根据这两个参数构建JSON数据,并通过`response.getWriter().write(json)`将JSON数据返回给JavaScript端。 #### 4. **关键代码片段解读** ```javascript var ds = new Ext.data.Store({ proxy: new Ext.data....

    Java Ext2.0 数据交互

    本文将详细探讨"Java Ext2.0数据交互"这一主题,包括如何进行增删改查操作以及如何处理XML文件。 首先,Ext2.0是Ext JS的一个版本,它是一个强大的JavaScript库,用于构建桌面级的Web应用。它提供了丰富的组件库,...

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    对于远程数据,通常会使用Ajax请求(DWR或者Ext.Ajax)从服务器获取JSON或XML格式的数据。 更新(Update):当用户修改了数据,Store会自动检测到这些变化。调用`sync()`方法会将更新后的数据发送回服务器,后台...

    json-c-0.6.tar.gz_JSON_json linux

    1. **解析JSON**:json-c提供了函数如`json_object_from_file()`和`json_tokener_new()`,可以读取JSON格式的文件或字符串,并将其转换为内部表示的JSON对象。 2. **生成JSON**:通过`json_object_to_json_string()`...

    ext3 gridRowEditor本地数据简单demo,有注释

    在ExtJS中,proxy是连接数据源和Store之间的桥梁,用于处理数据的读取、写入和删除操作。由于这是一个本地数据示例,因此没有实际向服务器发送请求,而是直接使用了"data"作为数据源。这意味着数据已经预先存在于...

    extjs_php向后台提交json_post的接收方法实例

    这里,`params`对象中的`data`键值对包含了要发送的JSON数据,`Ext.encode`函数负责将其转换为JSON格式。 在PHP端,由于JSON数据是作为字符串提交的,因此我们不能简单地通过`$_POST['data']`来获取。我们需要使用`...

    JSON ——数据库结果集转换

    4. **服务器端模板引擎**:如Thymeleaf、Freemarker等,可以在服务器端渲染HTML页面时动态生成JSON数据。 ### 结论 将数据库查询结果转换为JSON是现代Web应用中常见的需求,它涉及到前端展示、后端处理以及数据格式...

    jmeter实例(json断言+参数化)

    1. **格式化JSON数据**:将查看结果树中的响应数据复制到bejson等在线格式化工具中,确保其格式正确无误。 2. **定位目标数据**:根据需要验证的数据位置,构建合适的JSON路径表达式。比如,我们需要验证出版日期`...

    js实现Ext方式的将左表格中的数据移动至右表格

    数据通常存储在`Ext.data.Store`对象中,我们可以通过JSON数据或者服务器请求填充数据。在这个场景下,左侧表格的数据应预先存在于`leftStore`,右侧表格的数据存储在`rightStore`。 3. **用户交互**: 我们需要...

Global site tag (gtag.js) - Google Analytics