ExtJs表格控件(一)

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的显示,以及运行效果。

技术分享

技术分享

如果返回的数据是多条的话可以在Action中定义一个ArrayList对象,这个对象中存储的对象是需要返回的列的信息。同时将reader中的root值改为这个ArrayList对象名称即可。






郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。