文档章节

jsonGrid简单例子

itwriter
 itwriter
发布于 2014/05/31 17:55
字数 542
阅读 121
收藏 0
点赞 0
评论 0

ps: 在我自己写的例子中,代码完全正确,却调不出结果。后来发现,原来是返回的json串太大太长。

本例子要实现的是一个比较简单的以json格式为数据源的extjs grid例子。

//首先,定义好proxy,连接好远端数据源。

var proxy=new Ext.data.HttpProxy({url:'survey.html'});

//定义record
 var record=new Ext.data.Record.create([
    {name: 'appeId', mapping: 'appeId'},
    {name: 'survId'},
    {name: 'location'},
    {name: 'surveyDate'},
    {name: 'surveyTime'},
    {name: 'inputUserId'}
   ]);

 

//定义reader
 var reader=new Ext.data.JsonReader({},record);

//构建Store  
 //配置proxy,reader此两属性即可
  var store=new Ext.data.Store({
    proxy:proxy,
    reader:reader,
    autoLoad:true
    });

//载入
 //或者配置一下上面的autoLoad属性
 //store.load();

 

   // create the grid
    var grid = new Ext.grid.GridPanel({
  title:"一个json 网格例子",
  frame:true,
        store: store,
        columns: [
            {header: "appeId", width: 60, dataIndex: 'appeId', sortable: true},
            {header: "survId", width: 60, dataIndex: 'survId', sortable: true},
            {header: "location", width: 60, dataIndex: 'location', sortable: true},
            {header: "surveyDate", width: 100, dataIndex: 'surveyDate', sortable: true},
            {header: "surveyTime", width: 100, dataIndex: 'surveyTime', sortable: true},
            {header: "inputUserId", width:80, dataIndex: 'inputUserId', sortable: true}
        ],
        renderTo:Ext.getBody(),
        width:540,
        height:200
    });

 

本例数据源'survey.html',如下所示

[
 {
  "appeId":"1",
  "survId":"1",
  "location":"",
  "surveyDate":"2008-03-14",
  "surveyTime":"12:19:47",
  "inputUserId":"1",
  "inputTime":"2008-03-14 12:21:51",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"2",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-14",
  "surveyTime":"22:43:09",
  "inputUserId":"32",
  "inputTime":"2008-03-14 22:43:37",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"3",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-15",
  "surveyTime":"07:59:33",
  "inputUserId":"32",
  "inputTime":"2008-03-15 08:00:44",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"4",
  "survId":"1",
  "location":"",
  "surveyDate":"2008-03-15",
  "surveyTime":"10:45:42",
  "inputUserId":"1",
  "inputTime":"2008-03-15 10:46:04",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"5",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-16",
  "surveyTime":"08:04:49",
  "inputUserId":"32",
  "inputTime":"2008-03-16 08:05:26",
  "modifyTime":"0000-00-00 00:00:00"
 },{
  "appeId":"6",
  "survId":"32",
  "location":"",
  "surveyDate":"2008-03-20",
  "surveyTime":"20:19:01",
  "inputUserId":"32",
  "inputTime":"2008-03-20 20:19:32",
  "modifyTime":"0000-00-00 00:00:00"
 }]

 

效果如下:

一个json grid的例子 - 苏村李泰 - 文池字堆

 

概括起来,步骤如下:

1、定义好一个proxy

2、定义好record

3、定义好reader,本例用到的是JsonReader,把上面定义的record作为其构造函数的参数之一

4、构建Store, 刚才构造好的proxy,reader均作为store的构造函数配置项之一

5、构造grid,关键配置好store属性和columns属性。


本文转载自:http://ltai701.blog.163.com/blog/static/54201994201062572852953/

共有 人打赏支持
itwriter
粉丝 11
博文 105
码字总数 22803
作品 0
海淀
程序员
(3)JavaScript 之 DOM编程

DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚...

MK先生 ⋅ 2016/08/31 ⋅ 0

Hbase 学习(八) 使用MapReduce

在hbase的demo里面有个IndexBuilder的例子,它就是使用了MapReduce来操作hbase的,例子也比较简单,但是只包括了Mapper。 另外网上还有另外一个例子,也是说明这个的,这个例子更为全面一点,...

2k10 ⋅ 2015/05/11 ⋅ 0

深入了解Arrays.sort()

Arrays.sort(T[], Comparator<? super T> c) 是一个用于用户自定义排序对象的方法,在离线的JavaDoc中简单地描述了他怎么工作,但是没有更深入的解释,在这篇文章中,我们将讨论深入了解这个...

刀狂剑痴 ⋅ 2015/08/27 ⋅ 0

Spring Boot开发(一)-一个简单的Spring Boot工程

0.开发前的准备 Spring Boot主页:http://projects.spring.io/spring-boot/ Gradle使用 1.简单的入门级的例子 Gradle配置 核心代码-Controller 核心代码-入口 2.运行例子 例子的运行很简单,直...

似是而非Sage ⋅ 2016/06/30 ⋅ 0

结构型模式之五:门面模式

门面模式隐藏了一个任务的复杂性,提供吧一个简单的接口,一个很好的例子是电脑的启动,当一个电脑启动,他涉及CPU,内存,硬盘等等,为了使他对用户简单,我们添加一个门面来包裹这个任务的复...

刀狂剑痴 ⋅ 2015/08/27 ⋅ 0

简单一个opengl程序,2D图形移动

很早打算系统的学习一下opengl,但是由于课程以及学习算法占据了时间,一直没能开始,现在这段时间开始弄opengl了,这几天看正在看《Opengl 编程指南 第8版》,首先看了GLSL写shader。这里先...

iaccepted ⋅ 2015/02/13 ⋅ 0

python核心编程-第十一章-个人笔记(二)

7.3 作用域和 lambda lambda 语句中的表达式有和函数相同的作用域 >>> x = 10>>> def foo():... y = 5... bar = lambda: x+y... print bar()... y = 8... print bar() >>> foo()1518 7.4 变量......

好好先生_1028 ⋅ 2016/04/29 ⋅ 0

资源 的使用

(1)获得资源实例 ContextWrapper.getResource ( ); (2) 通过 对应的方法得到相应类型的资源 Resources.getString ( int id ); Resources.getColor (int id ); 例子: String myString = getR......

chuiyuan ⋅ 2014/05/08 ⋅ 0

Ext JS - Hello World

WELCOME TO EXT JS 这个向导提供了一个基本的Ext JS介绍。我们将会以一个非常简单的“hello world”例子来展开讨论。我们将以code是如何在Ext JS中组织的来开始。这个向导同时也包含了许多其...

BuWStudio ⋅ 2014/06/05 ⋅ 0

axios源码分析——取消请求

之前分析了两篇文章 请求流程分析,传送门,戳这里; 拦截器分析,传送门,戳这里; 这篇文章,来分析下取消请求是怎么实现的,先从一个简单的取消请求的例子开始: 这就是一个简单的取消请求...

mz同学x ⋅ 06/18 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tcp/ip详解-链路层

简介 设计链路层的目的: 为IP模块发送和接收IP数据报 为ARP模块发送ARP请求和接收ARP应答 为RARP模块发送RARP请求和接收RARP应答 TCP/IP支持多种链路层协议,如以太网、令牌环往、FDDI、RS-...

loda0128 ⋅ 今天 ⋅ 0

spring.net aop代码例子

https://www.cnblogs.com/haogj/archive/2011/10/12/2207916.html

whoisliang ⋅ 今天 ⋅ 0

发送短信如何限制1小时内最多发送11条短信

发送短信如何限制1小时内最多发送11条短信 场景: 发送短信属于付费业务,有时为了防止短信攻击,需要限制发送短信的频率,例如在1个小时之内最多发送11条短信. 如何实现呢? 思路有两个 截至到当...

黄威 ⋅ 昨天 ⋅ 0

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 昨天 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 昨天 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 昨天 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 昨天 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 昨天 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 昨天 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部