`

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>

分享到:
评论

相关推荐

    Ext Grid控件的高级应用

    本实例使用官方Ext3.1包 分五个部分 1.创建简单快捷的Ext Grid控件 代码清晰 2.Grid 读取 Xml 3.Grid 读取 json 4.Grid 读取 Excel 5.直接在 Grid 控件进行增删改查的操作 有任何疑问的同志欢迎提出即可谢谢

    Ext 开发指南 学习资料

    3.5.2. TreeLoader外传 之 读取本地json 3.6. jsp的例子是一定要有的 3.7. 让你知道树都可以做些什么 3.7.1. 检阅树形的事件 3.7.2. 右键菜单并非单纯的事件 3.7.3. 默认图标好单调,改一下撒 3.7.4. 偷偷告诉你咋从...

    Ext Js权威指南(.zip.001

    7.6.1 远程读取json数据 / 369 7.6.2 读取xml数据 / 378 7.6.3 store的数据操作 / 379 7.7 本章小结 / 384 第8章 模板与组件基础 / 385 8.1 模板 / 385 8.1.1 模板概述 / 385 8.1.2 ext.template的创建与...

    ExtJs+Servlet+Json简单示例

    用Ext写一个登陆界面,登陆完后进入一个...用Servlet发送请求,Json数据也是JS通过Servlet请求从数据库中读取显示在Grid表格中。例子比较简单,但方法很明朗。 代码没有经过处理,可能有些乱,但思路还是比较清晰的。

    一个多层架构多种数据库结合NHibernate和Ext.Net及Newtonsoft.Json实现用户增删除改查的小例子

    本来想像petshop一样做多...3, 读取不到数据的情况下会提示不能编译HSRK.Model.UserInfo.hbm.xml 有时问题出的好奇怪,程序发布之后又出现了这个提示, 将hibernate.cfg.xml中的注销掉又加上突然又行了,真是莫名其妙

    精通JS脚本之ExtJS框架.part1.rar

    10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子...

    Extjs分页使用Java实现数据库数据查询

    //HttpProxy类,我是从后台读取的是json数据格式的数据,所以使用JsonReader来解析; var proxy = new Ext.data.HttpProxy({ url:"com.test.check.servlets.QueryDetailServlet" }); var sta

    一个简单的Ext.XTemplate的实例代码

    把省份与城市以树的形式输出 代码如下: ... //获取后台回调的省份城市JSON格式数据 var response = Ext.util.JSON.decode(data.responseText); var province = new Ext.XTemplate( ‘”pros”&gt;’,//遍历读取pros ‘&lt;

    ExtJS 3.4关于TreePanel的一些实例

    3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 8. 给节点增加提示信息 9. 为节点设置超链接 10. 编辑节点名称 11. 树形的拖放 12. 判断拖放目标 13. 树之间的...

    精通JS脚本之ExtJS框架.part2.rar

    10.1.5 读取本地JSON数据 10.2 树的事件 10.3 右键菜单 10.4 修改节点的默认图标 10.5 从节点弹出对话框 10.6 节点提示信息 10.7 为节点设置超链接 10.8 树形的拖放 10.8.1 节点拖放的3种形式 10.8.2 叶子...

    fsExt:递归读取文件夹读取文件扩展名,根据上次修改日期返回每种文件格式的总数

    文件扩展名递归读取目录及其子目录,读取每个文件扩展名,增加每次读取的计数并按年份对总数进行分组,这是从 fs.stat last modified data 返回的值返回数据对象示例一个 json 文件将写入使用 --writepath 标志输入...

    extjs+servlet+json+soundmanager2实现定时刷新报警声音(原创)

    本人经过今天研究开发的基于sqlserver2000的,定时刷新读取数据库,如果有新的报警,提示音。

    ASP.NET MVC异步获取和刷新ExtJS6 TreeStore

    TreeStroe的root实际是一个层叠json数据,大部分情况是直接写一些简单数据,但在实际应用中必定是要从数据库读取的。我的方法是先用Ext.Ajax.request获取root数据形成TreeStroe。定义一个全局的TreeStroe名字是...

    ext-node-sql:ext-node-sql是一个简单的ExtJS Direct后端连接器,用于ms sql api,用于createreadupdatedestroy方法

    ext-node-sql ext-node-sql是用于ms sql api的简单ExtJS Direct后端连接器,用于创建/读取/更新/销毁方法使用的标准:ES5(ECMAScript5)MS SQL Server(T-SQL)ExtDirect规范( ?) 注意:尽管我使用了Sencha为Ext...

    n多树型菜单大集合,struts树 jquery树 dttree等

    收集了很多树,最后感觉用dwr读取数据用json树显示效率比较其他的高,文件也较小 struts树效率也很高

    node-md-meta-cataloger:用于解析Markdown文件(包括YAML Front Matter元数据)的模块和CLI

    轻松生成markdown文件及其内联元数据的JSON数组。 安装 npm install --save node-md-meta-cataloger 如何使用 CLI工具 node-md-meta-cataloger -i &lt;dir&gt; -o node-md-meta-cataloger -i /path/to/folder -o /...

    jquery-1.1.3 效率提高800%

    在jQuery 1.2版本中,如果你指明了一个JSONP回调函数,你就可以从其它的域中载入JSON类型的数据,写法类似于 "myurl?callback=?" 。jQuery会自动调用正确的方法名称来代替查询字符串,执行你指定的回调函数。...

    kandalf:RabbitMQ至Kafka桥

    默认情况下,它尝试从/etc/kandalf/conf/config.&lt;ext&gt;和./config.&lt;ext&gt;读取配置文件。 您可以使用-c 或--config 应用程序参数来更改路径。 如果找不到文件,则配置加载程序会回退以从环境变量读取配置值。 环境变量...

    python批量修改文件后缀示例代码分享

    ipad的goodreader对JS文件支持不太好,虽然可以读取它但总是无法退出,回不了goodreader的主界面,因此我需要把js文件批量变成纯文本。基于这个目的,我搞了下面一个小应用:复制代码 代码如下:# -*- coding:utf-8 -*...

    gulp-phantom:适用于gulp的PhantomJS插件

    口咽幻影 用于的插件。 该插件从gulp.src读取源gulp.src作为PhantomJS的脚本,并将输出记录到through对象中。 因此,您可以执行并将多个脚本转换为文本。... ext : 'json' } ) ) . pipe ( gulp . dest

Global site tag (gtag.js) - Google Analytics