EXT 3.x 使用详解之Ext.grid.GridPanel(一)

jsczxy2

浏览: 1275406 次
性别:
来自: 常州

最近访客更多访客>>

error0702

sagadan

gaofeng393

yaonai2003

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT Apple json JavaScript Google

很强大的grid总算登场啦，先来热热身，看下最简单的应用，详细就看注释吧，写的很全面 =-=：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page pageEncoding="UTF-8"%>
<html>
	<body>
		<script type="text/javascript">
		//页面加载完前执行
		Ext.onReady(function()
				{
					//根据元素id获得页面元素
					var page = Ext.get("Page");
					
					//定义json类型对象
					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']
					];
		
					//创建 data store
					var ds = new Ext.data.ArrayStore({
						//fields可以与具体列绑定,并且定义类型以及格式
					    fields: [
					       {name: 'company'},
					       {name: 'price', type: 'float'},
					       {name: 'change', type: 'float'},
					       {name: 'pctChange', type: 'float'},
					       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
					    ]
					});
					
					//data store开始加载,当然也可以在grid渲染后加载，具体体现在出现loading条
					ds.loadData(myData);
					
					//创建列模型,具体显示列头名称,列样式,能否排序(默认是页面排序,后面有讲到后台排序),dataIndex用来绑定data store具体数据
					var columnModel = 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, dataIndex: 'lastChange', renderer: Ext.util.Format.dateRenderer('m/d/Y')}
					]);	
					//创建grid对象并且绑定到Page的div层上(众多属性参看api)
					var grid = new Ext.grid.GridPanel({renderTo : "Page",height : 300, store  : ds, cm: columnModel});
					
					//grid.getSelectionModel().selectFirstRow();			
				});
				

    </script>
		<div id="Page"></div>
	</body>
</html>

分享到：

EXT 3.x 使用详解之Ext.grid.GridPanel( ... | EXT 3.x 使用详解之Ext.Window

2010-04-01 17:59
浏览 2177
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXT 3.x 使用详解之Ext.grid.GridPanel(一)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

EXT 3.x 使用详解之Ext.grid.GridPanel(一)

评论

发表评论

相关推荐

Ext中文官网

[转]EXT设计器破解2.X版本

EXT 3.x 使用详解之Ext.Direct(二)---polling,简单实现网页聊天功能

EXT 3.x 使用详解之Ext.Direct(一)

引用一下：EXT调试功能

EXT 3.x 使用详解之Ext.History浏览器前进后退功能(二)--整合grid分页

EXT 3.x 使用详解之Ext.History浏览器前进后退功能(一)

EXT 3.x 使用详解之fileUpload

EXT 3.x 使用详解之Ext.Viewport综合使用(一)

EXT 3.x 使用详解之Ext.grid.GridPanel(三)

EXT 3.x 使用详解之Ext.grid.GridPanel(二)

EXT 3.x 使用详解之Ext.Window

开始研究ext,使用心得

最近访客更多访客>>