在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. 效果如下:
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
//注2. 根据项目需要也可以直接使用formPanel 包含GridPanel组件, 代码如下:
/* var form = new Ext.form.FormPanel({
title:'Form Title',
frame:true,
style:'margin:10px',
items:gridPanel,
renderTo:'hello'
});*/
//同时删除Window组件定义的代码
//注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 组件定义代码
5. 项目代码请从附件[extjs_gridPanel_columnModel.zip] 中下载, 实例所涉及到的代码文件为以下两个:
index.jsp 位于WebRoot/index.jsp
gridPanel_columnModel.js 位于 WebRoot/study/gridPanel_columnModel.js