Ext2.2用数组为数据源显示Grid的例子
来源:互联网 发布:win电脑桌面整理软件 编辑:程序博客网 时间:2024/05/22 07:54
效果如下:
源代码如下:
后面,将使用java作为数据源,生成Grid,格式为json
http://www.java2000.net/p8756
<script type="text/javascript"><!--google_ad_client = "pub-2908059660288034";/* 728x90,首页中间 创建于 08-8-14 */google_ad_slot = "5903610560";google_ad_width = 728;google_ad_height = 90;//--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
源代码如下:
- <html>
- <head>
- <meta http-equiv="Content-Type" c>
- <title>Array Grid Example</title>
- <link rel="stylesheet" type="text/css"
- href="js/resources/css/ext-all.css" />
- <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src="js/ext-all.js"></script>
- <script type="text/javascript">
- Ext.onReady( function() {
- // 数据,使用JSON格式的标准格式。
- // 数组用[]
- // 数据用逗号分开
- var myData = [
- [ 1, '张三', 3800, 1.73, '1970-01-01' ],
- [ 2, '李四', 2800, 1.81, '1980-01-01' ],
- [ 12, '王武', 2000, 1.43, '1988-03-13' ]
- ];
- // 自定义的一个数据格式化方法
- // 根据数字进行不同颜色的显示
- function highter(val) {
- if (val > 1.50) {
- return '<span style="color:green;">' + val + '</span>';
- } else{
- return '<span style="color:red;">' + val + '</span>';
- }
- return val;
- }
- // 创建数据集的结构
- var store = new Ext.data.SimpleStore( {
- fields : [ {
- name :"id"
- }, {
- name :'name'
- }, {
- name :'price',
- type :'int'
- }, {
- name :'high',
- type :'float'
- }, {
- name :'birthday',
- type :'date',
- dateFormat :'Y-m-d' // 日期的格式
- } ]
- });
- // 从数组里面装载数据
- store.loadData(myData);
- // 创建表格
- var grid = new Ext.grid.GridPanel( {
- store :store,
- columns : [ {
- id : "id", // 内部的标识
- header : "编号", // 显示的标题
- width : 60, // 宽度
- sortable : true, // 是否可以排序
- dataIndex : "id" // 对应数据集的字段
- },{
- id :'name',
- header :"姓名",
- width :160,
- sortable :true,
- dataIndex :'name'
- }, {
- header :"收入",
- width :75,
- sortable :true,
- renderer :'usMoney', // 使用系统自带的格式化方法
- dataIndex :'price'
- }, {
- header :"身高(米)",
- width :75,
- sortable :true,
- dataIndex :'high',
- renderer: highter // 自定义的数据格式化方法
- }, {
- header :"出生日期",
- width :100,
- sortable :true,
- renderer :Ext.util.Format.dateRenderer('Y年m月d日'), // 自定义的日期显示
- dataIndex :'birthday'
- } ],
- autoExpandColumn :'name', // 这个列将默认占用所有的可用的列宽
- height :350, // 高度
- width :600, // 宽度
- title :'人员信息表格' // 表格的标题
- });
- grid.render('grid-example'); // 生成到这个id标签里面
- });
- </script>
- </head>
- <body>
- <h1>Grid例子 - <a href="http://www.java2000.net">JAVA世纪网</a> </h1>
- <div id="grid-example"></div>
- </body>
- </html>
后面,将使用java作为数据源,生成Grid,格式为json
http://www.java2000.net/p8756
<script type="text/javascript"><!--google_ad_client = "pub-2908059660288034";/* 728x90,首页中间 创建于 08-8-14 */google_ad_slot = "5903610560";google_ad_width = 728;google_ad_height = 90;//--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- Ext2.2用数组为数据源显示Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- Ext2.2-用XML做数据源,可编辑Grid的例子
- ext2.2打造全新功能grid系列--显示列表篇
- ext2.2打造全新功能grid系列--显示列表第二篇
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- Ext2.0框架的Grid使用介绍
- OpenSolaris安装过程中,如何使用USB upgrade driver?
- 美国的无线网络发展新动向
- Solaris dom0 xen-unstable.hg source for developers
- 泡妞
- 机器太好也会让人郁闷
- Ext2.2用数组为数据源显示Grid的例子
- LaTeX installation under linux
- Ext的日期格式说明
- 进入一门语言的途径
- pcitools in OpenSolaris, a good pci debug tool
- 8.21
- 我收藏的特殊字符过滤函数
- 在asp.net 2.0中结合母板页使用meta标签(扩展@Page指令)
- 一个结构体的内存布局