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对象名称即可。
时间： 2024-11-05 20:45:36