MyException - 我的异常网
当前位置:我的异常网» JavaScript » ExtJs表格控件(1)

ExtJs表格控件(1)

www.MyException.Cn  网友分享于:2015-02-11  浏览:0次
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对象名称即可。






文章评论

我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
老程序员的下场
老程序员的下场
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
中美印日四国程序员比较
中美印日四国程序员比较
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
一个程序员的时间管理
一个程序员的时间管理
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
每天工作4小时的程序员
每天工作4小时的程序员
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
10个调试和排错的小建议
10个调试和排错的小建议
程序员必看的十大电影
程序员必看的十大电影
我是如何打败拖延症的
我是如何打败拖延症的
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
为什么程序员都是夜猫子
为什么程序员都是夜猫子
如何成为一名黑客
如何成为一名黑客
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
那些争议最大的编程观点
那些争议最大的编程观点
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
旅行,写作,编程
旅行,写作,编程
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
代码女神横空出世
代码女神横空出世
我的丈夫是个程序员
我的丈夫是个程序员
程序员都该阅读的书
程序员都该阅读的书
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
漫画:程序员的工作
漫画:程序员的工作
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
编程语言是女人
编程语言是女人
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
 程序员的样子
程序员的样子
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
鲜为人知的编程真相
鲜为人知的编程真相
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有