在Extjs中，GridPanel用于数据显示，即我们平时说的列表页。在本节中，我们先对GridPanel有个基本的认识，后继过程再做Demo练习详细讲解在开发中的应用。
1. index.jsp代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<!--ExtJs框架开始-->
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<!--ExtJs框架结束-->
<!--
<script type="text/javascript" src="study/helloWorld.js"></script>
<script type="text/javascript" src='study/window.js'></script>
<script type="text/javascript" src='study/formPanel.js'></script>
<script type="text/javascript" src='study/textField.js'></script>
<script type="text/javascript" src='study/button.js'></script>
<script type="text/javascript" src='study/login.js'></script>
-->
<!--调用/study/gridPanel_columnModel.js 实现列表信息页面 -->
<script type="text/javascript" src="Ext/src/locale/ext-lang-zh_CN.js"></script><!--中文日期翻译-js-->
<script type="text/javascript" src="study/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src='study/gridPanel_columnModel.js'></script>
<style type="text/css">
.loginicon
{
background-image: url(study/login.gif) !important;
}
</style>
<style type='text/css'>
.x-form-unit
{
height:22px;
line-height:22px;
padding-left:2px;
display:inline-block;
display:inline;
}
</style>
</head>
<body>
<!--------------------- 上层 -->
<!-- 这里使用ContainerLayout: 垂直方式布局 -->
<div id='ContainerLayout' style='float:left;width:300px'></div>
<!-- padding-left 是用来填充间隔,如果没有则两个容器/组件会完全挨着 -->
<div id='hello' style='float:left;width:300px;padding-left: 10px'></div>
<div id='right-upward' style='float:left;width:700px;padding-left:15px'></div>
<!--------------------- 中间------------------------------------>
<div id='BorderLayout' style='padding: 20px 0px 0px 0px;clear:both'></div>
<!--------------------- 底层------------------------------------>
<div id='accordionLayout' style='float:left;padding:20px 0px;width:300px;height:200px'></div>
<!-- 两个Panel渲染同一div,不会相互覆盖,会上下依次显示 -->
<div id='fitLayout' style='float:left; padding:20px 0px 0px 20px;height:30px'></div>
<!-- 表格布局 -->
<div id='tableLayout' style='float:left; padding:20px 0px 0px 20px;height:30px;width:100px'></div>
</body>
</html>
2. gridPanel_columnModel.js 代码如下:
Ext.onReady(function(){
//复选框
var checkBoxSelection = new Ext.grid.CheckboxSelectionModel(); //创建一个复选框的列
//数据源, 如同数据库中的存储一样
// id name sex birthday
// 1 HuiQinBo 0 1900-01-01
// 2 Andy 0 1901-02-02
// 3 BoWen 1 1902-03-03
var jsonStore = new Ext.data.JsonStore({ //创建新的数据源
data:[ //数据项:如同数据库中的存储一样
{id:1,name:'HuiQinBo',sex:'0',birthday:'1901-01-01'},
{id:2,name:'Andy',sex:'0',birthday:'1902-02-02'},
{id:3,name:'BoWen',sex:'1',birthday:'1903-03-03'}
],
//fields为列的定义, 指出数据源应该有几列,每列的名称和数据类型等信息,以上说明有4列;
//列名分别为id,name,sex,brithday
fields:['id','name','sex',{name:'birthday',type:'date',dateformat:'Y-m-d'}]
});
//定义列
var column = new Ext.grid.ColumnModel({
columns:[
checkBoxSelection,
{header:'编号',dataIndex:'id',sortable:true},
{header:'名字',dataIndex:'name'},
{header:'性别',dataIndex:'sex'},
{header:'生日',dataIndex:'birthday',renderer:Ext.util.Format.dateRenderer('Y-m-d')}
]
});
//创建工具栏按钮, 可添加多个按钮,如'添加','删除','修改'
var tbtn = new Ext.Toolbar.Button({
text: '查看选中项',
listeners: {
'click': function () {
var row = grid.getSelectionModel().getSelections();
for (var i = 0; i < row.length; i++) {
alert(row[i].get('id'));
}
}
}
});
//分页
var pager = new Ext.PagingToolbar({ //创建一个分页控件
pageSize:2, //页码大小为2
store:jsonStore, //分布的数据源
listeners:{//由于没有链接后台数据库动态绑定数据库，这里在，点下一页时‘beforechange’事件做了个 return false
'beforechange':function(bbar,params){
var grid = bbar.ownerCt;
var store = grid.getStore();
var start = params.start; //起始数据的索引号
var limit = params.limit; //每页的大小
console.log("<==下面是打印信息==>");
console.log(store.getCount());
console.log(start);
console.log(limit);
console.log("<===打印结束=====>")
alert(store.getCount());
return false;
}
}
});
//列表
var gridPanel = new Ext.grid.GridPanel({ //创建一个新的grid
sm:checkBoxSelection,
title:'GridPanel', //如果没有title就不会有列表上面的头
height:200,
store:jsonStore, //数据源
tbar:[tbtn], //顶部的按键
bbar:pager, //底部的分页
colModel:column //列表头与列
//renderTo:'hello' //如果不想使用Window 和 form组件包含, 单独定义使用
});
//表单
var form = new Ext.form.FormPanel({
//title:'Form Title',
frame:true,
style:'margin:10px',
items:gridPanel
//renderTo:'hello' //如果不想使用Window组件包含
});
//窗体
new Ext.Window({
title:'Window',
width:476,
height:375,
items:gridPanel
}).show();
});
4. 效果如下:
![无废话ExtJs 系统教程十四[列表：GridPanel]](http://img.e-com-net.com/image/product/5dd6804c80614fb885ad0053121f6a2d.jpg)
3. 说明：
//注1. 其实可以不使用Window组件包含form再包含GridPanel组件,
// 而直接使用Widnow包含GridPanel, 代码如下:
/* new Ext.Window({
title:'Window',
width:476,
height:375,
items:gridPanel
}).show();*/
//同时删除form表单组件定义的代码
//这时就是Widow组件里面直接包含GridPanl样式.
//效果参照附件gridPanel_columnModel2.jpg
![无废话ExtJs 系统教程十四[列表：GridPanel]](http://img.e-com-net.com/image/product/10a355d82fd8400fbbee288231182e8e.jpg)
//注2. 根据项目需要也可以直接使用formPanel 包含GridPanel组件, 代码如下:
/* var form = new Ext.form.FormPanel({
title:'Form Title',
frame:true,
style:'margin:10px',
items:gridPanel,
renderTo:'hello'
});*/
//同时删除Window组件定义的代码![无废话ExtJs 系统教程十四[列表：GridPanel]](http://img.e-com-net.com/image/product/6a83ecae7c254736938483275a59cfd6.jpg)
//注3. 也可以不使用Window 和 Form组件, 而直接使用GridPanel组件:
/*var gridPanel = new Ext.grid.GridPanel({ //创建一个新的grid
sm:checkBoxSelection,
title:'GridPanel', //如果没有title就不会有列表上面的头
height:200,
store:jsonStore, //数据源
tbar:[tbtn], //顶部的按键
bbar:pager, //底部的分页
colModel:column, //列表头与列
renderTo:'hello'
});*/
//同时删除Window 和Form 组件定义代码
![无废话ExtJs 系统教程十四[列表：GridPanel]](http://img.e-com-net.com/image/product/4bab0246369140148e219a43b01941e2.jpg)
5. 项目代码请从附件[extjs_gridPanel_columnModel.zip] 中下载, 实例所涉及到的代码文件为以下两个：
index.jsp 位于WebRoot/index.jsp
gridPanel_columnModel.js 位于 WebRoot/study/gridPanel_columnModel.js