ExtJs表格控件（一）

浏览数：65 / 时间：2015年06月09日

ExtJs表格由类Ext.grid.GridPanel定义，其xtype为grid。表格中列信息由columns定义，而表格的数据存储器由Ext.data.Store定义。

列的定义是一个JSON数组，这个JSON数字是整个表格列的模型必须首先定义，这个JSON数组中的每一个元素都是描述一列属性的，包含：显示文本（header）、列对应的记录集字段（dataIndex）、列的渲染函数（renderer)、宽度（width)以及格式化信息（format）。

下面看一个具体示例：

首先在JSP页面中引入EXT相关的资源，并且引入自己写的JS文件，并且在页面中个定义一个DIV，定义ID为grid。用于显示写成的表格。

<%@ 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>

<link rel="stylesheet" type="text/css"
	href="./extjs/resources/css/ext-all.css">
<script type="text/javascript" src="./extjs/ext-all.js"></script>
<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="./script/table.js"></script>
</head>

<body>
	<div id="grid"></div>
</body>
</html>

然后看table.js，在这个JS文件中定义了columns和Store还有grid。

Ext.onReady(function() {
	
	//渲染函数
	var datarender = function(value){
		return "<span style='color:green;font-weight:bold;'>"+value+"</span>";
	};
	
	var columns = [ {
		header : '第一列',
		dataIndex : 'first',
		renderer:datarender
	}, {
		header : '第二列',
		dataIndex : 'second'
	}, {
		header : '第三列',
		dataIndex : 'third'
	}, {
		header : '第四列',
		dataIndex : 'four',
		format:'Y-m-d H:i:s',
		width:120
	} ];

	var store = new Ext.data.Store({
		proxy : {//获取数据的方式
			type : 'ajax',
			url : 'grid_StoreMsg',
			reader : {//解析数据方式
				type : 'json',
				root : 'model'//指定返回JSON中key
			}
		},
		fields : [ {
			name : 'first'
		}, {
			name : 'second'
		}, {
			name : 'third'
		}, {
			name : 'four'
		} ]
	});
	store.load();

	var grid = new Ext.grid.GridPanel({
		renderTo : 'grid',
		columns : columns,
		store : store
	});
});

这里使用Struts2对请求进行拦截，看Struts,xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
	<package name="gridpackage" extends="json-default">
		<action name="grid_*" class="action.GridAction" method="{1}">
			<result type="json" name="success"></result>
			<result type="json" name="error"></result>
		</action>
	</package>
</struts>

这里需要返回值类型定义为JSON，所有package要集成自json-default。下面看具体的类。

为了方便数据传输，将表格中的每一行看成一个对象。将他信息封装成一个javabean。

package model;

public class Model {
	private String first;
	private String second;
	private String third;
	private String four;
	
	public Model(){
		
	}
	
	public Model(String first,String second,String third,String four){
		this.first = first;
		this.second = second;
		this.third = third;
		this.four = four;
	}
	
	public String getFirst() {
		return first;
	}
	public void setFirst(String first) {
		this.first = first;
	}
	public String getSecond() {
		return second;
	}
	public void setSecond(String second) {
		this.second = second;
	}
	public String getThird() {
		return third;
	}
	public void setThird(String third) {
		this.third = third;
	}
	public String getFour() {
		return four;
	}
	public void setFour(String four) {
		this.four = four;
	}
}

这里定义一个方法直接返回这个Model类的对象，在实际生产中需要经过处理后得到对象。

package service;

import model.Model;

public class Service {
	public Model modelMsg(){
		Model model = new Model();
		model.setFirst("第一行");
		model.setSecond("第二行");
		model.setThird("第三行");
		model.setFour("20150205 14:32:46");
		return model;
	}
}

下面看一个Action类

package action;

import service.Service;
import model.Model;

import com.opensymphony.xwork2.ActionSupport;

public class GridAction extends ActionSupport {
	private Model model;
	
	private Service service = new Service();
	
	public Model getModel() {
		return model;
	}
	public void setModel(Model model) {
		this.model = model;
	}

	public String StoreMsg(){
		model = service.modelMsg();
		return SUCCESS;
	}
}

应为Struts定义的类型为JSON，而且在配置文件中没有限制返回的字段，所有经过Action处理后将会把所有的属性封装成一个JSON对象返回。因此在Store的reader中需要指定root属性，方便解析。下面看一下firebug的显示，以及运行效果。

技术分享