extjs 我的第一个ext程序--grid

ll_feng

浏览: 389497 次
性别:
来自: 北京

最近访客更多访客>>

jppaer

su3795

li_zongjin

乜咩耶耶

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

EXT 数据结构浏览器 HTML

很欣赏extjs的炫，忍不住开始学习。参考了一个视频课件，开始了。
背景：
只想写一个很简单的grid界面，不与后台交互

涉及两个文件：
grid.html,grid.js

grid.js:

Ext.onReady(function(){

	//定义表头
	var oColModels = new Ext.grid.ColumnModel([
		{header:'ID',dataIndex:'id'},
		{header:'姓名',dataIndex:'name'},
		{header:'EMail',dataIndex:'email'},
		{header:'性别',dataIndex:'sex'},
		{header:'年龄',dataIndex:'age'}
	]);
	
	//定义数据结构，即数据库字段
	var aFields = ["id","name","email","sex","age"];
	
	//数据集
	var aDatas = [
					["1","name1","name1@abc.com","1","21"],
					["2","name2","name2@abc.com","0","22"],
					["3","name3","name3@abc.com","1","23"],
					["4","name4","name4@abc.com","0","24"],
					["5","name5","name5@abc.com","1","25"]
				 ];	
	
	//数据存储器
	var oStore = new Ext.data.SimpleStore({
		fields : aFields,
		data : aDatas
	});
	
	//
	var oGrid = new Ext.grid.GridPanel({
		title:"grid列表显示示例",
		width:600,
		height:200,
		colModel : oColModels,
		store : oStore
	});

	
	//
	oGrid.render(Ext.get("grid-example"));
});

这里遇到了一个问题：如果oGrid对象不定义height的话，页面中只显示每一条数据，页例子中的程序却不用定义heigth,很不可理解，这个问题以后再研究。

grid.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script type="text/javascript" src="../../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../scripts/ext/ext-all-debug.js"></script>
    <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css"></link>
<script language="javascript" src="grid.js"></script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>

浏览grid.html页面，得到如下效果：