PHP学会网 php培训网 PHP暑期培训 PHP寒假培训 PHP假期培训 » YUI,ext JS » Ext器件 列表Grid使用说明
本页主题: Ext器件 列表Grid使用说明 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

phpwhy

头衔:总管 总管
该用户目前不在线
级别: 管理员
精华: 3
发帖: 633
威望: 550 点
金钱: 5560 PYMB
贡献值: 0 点
在线时间:12(小时)
注册时间:2005-09-15
最后登录:2008-10-07

Ext器件 列表Grid使用说明


关键字: ext 在Ext中,Grid的使用包括以下几个步骤:1、获取数据集,示例代码如下js 代码
    var myData = [   
  1.       ['Apple',29.89,0.24,0.81,'9/1 12:00am'],   
  2.       ['Ext',83.81,0.28,0.34,'9/12 12:00am'],   
  3.       ['Google',71.72,0.02,0.03,'10/1 12:00am'],   
  4.       ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],   
  5.       ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']   
  6. ];   
该数据集是由数组构成,包括5条记录,每条记录包括五个字段:一个字符串型、三个浮点型和一个日期型。 2、将数据集进行装载,这个过程需要设置两件事,一件是指定要装载的数据和代理形式,一件是指定读取时规则,示例代码如下js 代码
    var ds = new Ext.data.Store({   
  1.       proxy: new Ext.data.MemoryProxy(myData),   
  2.       reader: new Ext.data.ArrayReader({id: 1}, [   
  3.               {name: 'company'},   
  4.               {name: 'price', type: 'float'},   
  5.               {name: 'change', type: 'float'},   
  6.               {name: 'pctChange', type: 'float'},   
  7.               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}   
  8. ])   
  9. });   
  10. 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([   
  1.       {header: "Company", width: 120, sortable: true, dataIndex: 'company'},   
  2.       {header: "Price", width: 90, sortable: true, dataIndex: 'price'},   
  3.       {header: "Change", width: 90, sortable: true, dataIndex: 'change'},   
  4.       {header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},   
  5.       {header: "Last Updated", width: 120, sortable: true,   
  6.       renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}   
  7. ]);   
在这里它指定了每一列的显示表头名、宽度、是否可以排序,以及数据引用的名称。在数据显示时可以通过renderer进行格式化设置,使数据显示更友好。 4、构建列表并显示,示例代码如下js 代码
    var grid = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});   
  1. grid.render();   
  2. grid.getSelectionModel().selectFirstRow();   
这里通过构建Grid对象进行了列表设置,包括数据源ds和字段模型colModel,这两项就是前面部分准备的。grid.render();——指得是将构造的Grid呈现到页面grid.getSelectionModel().selectFirstRow();——将第一行作为默认选择行
你适合当程序员吗?给想学编程的朋友
http://www.phpwhy.com/read.php?tid=5258&page=1&toread=1

  远程免费试听http://www.phpwhy.com/bbs/read.php?tid=4514
学校照片见 http://www.phpwhy.com/bbs/read.php?tid=4091


PHP培训,网站建设咨询
联系电话: 0571-85980046 ,0571-86704910
联系人:何老师
qq:310172
地址:杭州下沙4号路物美西子阳光星城1座501室智达电脑培训中心
顶端 Posted: 2008-01-20 21:30 | [楼 主]
PHP学会网 php培训网 PHP暑期培训 PHP寒假培训 PHP假期培训 » YUI,ext JS

现在时间:10-08 07:43 Copyright © 2006 phpwhy.com 版权所有
浙ICP备05060669号

点击这里给我发消息关于我们 - 合作联系