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对象名称即可。