extjs 小弟我的第一个ext程序-grid
日期：2014-05-16 浏览次数：20363 次
extjs 我的第一个ext程序--grid
很欣赏extjs的炫，忍不住开始学习。参考了一个视频课件，开始了。
背景：
只想写一个很简单的grid界面，不与后台交互
涉及两个文件：
grid.html,grid.js
grid.js:
这里遇到了一个问题：如果oGrid对象不定义height的话，页面中只显示每一条数据，页例子中的程序却不用定义heigth,很不可理解，这个问题以后再研究。
grid.html:
浏览grid.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页面，得到如下效果：
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
