在Ext中,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呈现到页面
grid.getSelectionModel().selectFirstRow();——将第一行作为默认选择行
分享到:
相关推荐
EXT GRID使用EXT GRID使用 EXT GRID使用EXT GRID使用
非常流行的网页开发框架,另你耳目一新啊。超级经典啊
Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分,回帖加1分,欢迎下载,童叟无欺。Ext grid中渲染进度条,超帅 源码-----下载不扣分...
Ext中的Grid,在很多行的情况下,出现纵向滚动条的情况下,鼠标滚轴单次滚动后,Grid表格移动的行数控制
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
EXT-JS Grid 用法 用EXT Designer 工具设计,步骤清晰详尽。
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
用于Ext开发Grid中遇到的所锁列的问题,这个很有帮助
extgrid 是一款jquery上的gird插件 界面风格采用了类似easyui extjs 界面风格样式 可通过css修改自己想要的样式 extgrid具有列大小 位置改变 排序 分组 分页 工具栏 扩展行 rowNumber 多选列 编辑列 行列锁 ajax...
Ext4 grid打印,打印预览,复杂表头打印,等等都实现了!
Ext中grid鼠标单击的每一行数据都能累加id,取消某一行id也随着取消,很实用。
支持Ext3 Ext4导出excel,客户端导出表格,支持各种主流浏览器。
Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码
NULL 博文链接:https://laodaobazi.iteye.com/blog/1064607
对ext Grid进行了封装,动态加载数据源,动态生成列
Ext自定义Grid Cell插件,使用此插件可以在Grid空间的Cell单元格中插入指定的控件
我的资源不需要积分 EXT2.0 GRID 示例 很实用
ext超酷的grid中放图片(ext3.2.1)
Ext编写的列表页面,支持编辑,排序等功能
本例采用PHP,json, sqlite,来显示一个EXT3.0的Grid,需要PHP环境,可以用xampp集成包。 部署后访问http://localhost/ExtSample/employee.php