公司这次用EXTJS 做后台,原因很简单布局非常漂亮大气。然后找到了他的API文档http://docs.sencha.com/ext-js/3-4/#!/api/Ext.data.Store 大概知道个所以然。当看到Grid这个例子的时候 ,这些步骤看的不是太明白为什么,然后找了这个通俗易懂的资料。
Grid的使用包括以下几个步骤:
1、获取数据集,示例代码如下
js 代码
- var myData = [
- ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
- ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
- ['Google',71.72,0.02,0.03,'10/1 12:00am'],
- ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
- ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
- ];
该数据集是由数组构成,包括5条记录,每条记录包括五个字段:一个字符串型、三个浮点型和一个日期型。
2、将数据集进行装载,这个过程需要设置两件事,一件是指定要装载的数据和代理形式,一件是指定读取时规则,示例代码如下
js 代码
- var ds = new Ext.data.Store({
- proxy: new Ext.data.MemoryProxy(myData),
- reader: new Ext.data.ArrayReader({id: 1}, [
- {name: 'company'},
- {name: 'price', type: 'float'},
- {name: 'change', type: 'float'},
- {name: 'pctChange', type: 'float'},
- {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
- ])
- });
- ds.load();
第一件事(指定要装载的数据和代理形式),是通过proxy: new Ext.data.MemoryProxy(myData)完成得,它指定了装载数据为myData,代理形式为内存代理。代理形式除了内存方式之外还有HttpProxy和ScriptTagProxy等形式。
第二件事(指定读取时规则),是通过reader: new Ext.data.ArrayReader({id: 1}, [……]) 完成的,这里它指定为数组读取,并指定数据项的名称和类型。
3、设置页面显示列表参数,示例代码如下:
js 代码
- var colModel = new Ext.grid.ColumnModel([
- {header: "Company", width: 120, sortable: true, dataIndex: 'company'},
- {header: "Price", width: 90, sortable: true, dataIndex: 'price'},
- {header: "Change", width: 90, sortable: true, dataIndex: 'change'},
- {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
- {header: "Last Updated", width: 120, sortable: true,
- renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
- ]);
在这里它指定了每一列的显示表头名、宽度、是否可以排序,以及数据引用的名称。
在数据显示时可以通过renderer进行格式化设置,使数据显示更友好。
4、构建列表并显示,示例代码如下
js 代码
- var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
- grid.render();
- grid.getSelectionModel().selectFirstRow();
这里通过构建Grid对象进行了列表设置,包括数据源ds和字段模型colModel,这两项就是前面部分准备的。
grid.render();——指得是将构造的Grid呈现到页面
分享到:
相关推荐
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
NULL 博文链接:https://lucky16.iteye.com/blog/1522254
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
ExtJS----HelloWorld程序源码
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs--创建图表 折线图、饼状图、柱状图
extjs-basex.js extjs-basex.js extjs-basex.js
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
ExtJS 文字教程 extjs2 dojochina系列 extjs2视频教程 DOJO Extjs3-北风 Extjs3-大漠 ExtJS3.4-界面实战 extjs4 30集 uspcat系列 extjs4 其他视频一套 Extjs4.0MVC项目开发视频教程 extjs4.1.1视频教程 ExtJS4培训...
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
EXTJS---完整数据库代码,全网唯一,非常适合EXTJS搭建框架,包含动态树,菜单,集成SPIRNGMVC+exjs+jdbc 等
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
Extjs4---combobox省市区三级联动+struts2
extjs4.2-2
extjs-theme-bootstrap-master.zip
Extjs4--Form登录功能,结合struts2