无废话ExtJs 系统教程十四[列表：GridPanel]

huiqinbo

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

最近访客更多访客>>

薛宝钗的猫

iamjustlyl

A741841403

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

无废话ExtJs 系列教程

在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