GridPanel显示

用GridPanel做了一个小的练习,也是方便大家对GridPanel面板的学习. 功能:实现分页的功能,排序的功能!! 分为4个部分: (1)Users.html;(2)Users.js;(3)JsonUsers.jsp;(4)Users.java 第一个Users.html代码: rel="stylesheet" type="text/css" href="resources/css/ext-all.css">

这是前台的页面,比较的简单,大家在练习的时候,注意ext的css和js文件的路径(重要!!) 这个页面中就有一个div,并且这个div要和后面介绍的核心User.js文件中的renderTo属性要一致. (2)核心Users.js文件; // GridPanel表格面板核心js文件 // 2010-01-08 作者:aa00aa00 Ext.onReady(function() { Ext.QuickTips.init();// 浮动信息提示 Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地 // 定义数据源为远程代理和JSON数据格式,Ext.data.Store是ExtJS里面非常重要的一个类，它一般翻译成数据源，因为它决定了在哪里获得数据以及如何解析数据� var ds = new Ext.data.Store({ proxy : new Ext.data.HttpProxy({ // 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件 url : 'JsonUsers.jsp' }), reader : new Ext.data.JsonReader({ // 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!! totalProperty : 'totalProperty', root : 'root' }, [{ name : 'id' }, { name : 'username' }, { name : 'address' }, { name : 'email' }]) }); // 加载首页数据，每页显示10条记录� // params中的2个参数:(1)start和(2)limit是要传到JsonUsers.jsp文件中,从JsonUsers.jsp返回json数据的格式,然后显示出来!! ds.load({ params : { start : 0, limit : 10 } }); // 定义复选框 var sm = new Ext.grid.CheckboxSelectionModel(); // 定义列模型 var cm = new Ext.grid.ColumnModel([ // new Ext.grid.RowNumberer(),// 添加自动行号� sm,// 添加复选框� { header : '编号', width : 40, dataIndex : 'id' }, { header : '姓名', dataIndex : 'username' }, { header : '地址', dataIndex : 'address' }, { header : '电子邮件', width : 120, dataIndex : 'email', renderer : sendEmail // 单击启动邮件客户端发送邮件 }]); // 设置所有列字段默认排序 cm.defaultSortable = true; // 按要求渲染email的函数 function sendEmail(value) { return " <%!private static List list = new ArrayList (); static { // for循环生成100条数据 for (int i = 0; i < 100; i++) { //Student stu = new Student(); Users users = new Users(); users.setId(i); users.setUsername("xuhao" + i); users.setAddress("沈阳市"); users.setEmail("xuhao802158@163.com"); list.add(users); } }%> <% // 设置格式 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); //System.out.println(request.getParameter("name") + " attribute"); JSONObject json = new JSONObject(); // 从Users.js中获得分页的参数(1)start;(2)limit String strStart = request.getParameter("start"); String strLimit = request.getParameter("limit"); int start = Integer.parseInt(strStart); int limit = Integer.parseInt(strLimit); List arrList = list.subList(start, start + limit); json.put("totalProperty", 100); JSONArray arr = JSONArray.fromObject(arrList); json.put("root", arr); // System.out.println(json); response.getWriter().print(json); out.clear(); out = pageContext.pushBody(); %> (4)这里还有一个javabean(Users.java) 比较的简单,就是一些get和set方法 /** * javabean类 * 用来封装用户的信息 */ package org.leno.javabean; import java.io.Serializable; public class Users implements Serializable { private int id; // 编号 private String username; // 姓名 private String address; // 地址 private String email; // 邮件 public Users() { } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getAddress() { return address; } public void setAddress(String address) { this.address = address; } public String getEmail() { return email; } public void setEmail(String email) { this.email = email; } } 最后总结一下: ExtJS中的表格功能非常强大，包括了排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。但很多人在应用的时候都会因为遇到一些细节问题而苦恼，为什么提示信息出不来呀？为什么s.gif图片在断网的情况下不能显示啊？为什么从后台得不到JSON数据啊？为什么日期的格式无法转换啊？为什么翻页就是报错啊？为什么拖曳功能就是实现不了啊？等等等等。最后归结到一句话，为什么ExtJS这么乱七八糟啊？！呵呵，为了帮助大家解决ExtJS的这些小麻烦，许老师做了下面的一个小DEMO来演示GridPanel的用法，后面有时间会陆陆续续演示其它组件的主要用法。我的愿望就是大家看了这个小专题之后，能够在最短的时间内掌握ExtJS的各种组件的应用。至于基本功的修炼，还得烦劳大伙自己用心。好啦，不多说，下面我们来看ExtJS中最实用的组件：表格面板。 表格由类Ext.grid.GridPanel定义，继承自Panel，其xtype为grid。ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义、而表格的数据存储器由Ext.data.Store定义。这些都是基础知识，大家应该清楚了。我们主要要牢记，ExtJS里最主要的是JSON数据格式，ColumnModel是要显示表格的列的定义信息，而Store则是数据记录的来源。那么，数据呢，又可以分为本地数据和远程数据，它们分别使用不一样的代理；数据格式有Array，JSON，XML，针对每种数据格式ExtJS都有相应的解析方式，就是Store的读取器。我们最核心的当然是先掌握远程JSON数据的Store的用法。我们来看一个例子，这个例子包含了一般表格的常用功能，譬如按要求改变列的数据，右键菜单，面板折叠，强大的拖曳（drag/drop）以及分页处理。