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

最新推荐文章于 2024-11-05 16:52:23 发布

ll_feng

最新推荐文章于 2024-11-05 16:52:23 发布

阅读量94

点赞数

分类专栏： ajax 文章标签： EXT 数据结构浏览器 HTML

本文链接：https://blog.csdn.net/ll_feng/article/details/83554140

版权

ajax 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

很欣赏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页面，得到如下效果：
[img]http://dl.iteye.com/upload/attachment/202861/57c839ba-edc3-3cb6-927a-55ddc199182e.gif[/img]