`
aa00aa00
  • 浏览: 327143 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
文章分类
社区版块
存档分类
最新评论

Extjs-GridPanel面板(原创)

EXTjsonCSSJSPJavaScript 
阅读更多

用GridPanel做了一个小的练习,也是方便大家对GridPanel面板的学习.

功能:实现分页的功能,排序的功能!!

分为4个部分:

(1)Users.html;(2)Users.js;(3)JsonUsers.jsp;(4)Users.java

第一个Users.html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Insert title here</title>

  <link rel="stylesheet" type="text/css"
   href="resources/css/ext-all.css">

  <script type="text/javascript" src="resources/js/ext-base.js"></script>

  <script type="text/javascript" src="resources/js/ext-all.js"></script>

  <script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>

  <script type="text/javascript" src="resources/js/Users.js"></script>

  <style type="text/css">
</style>

 </head>

 <body>

  <div id="myUsers"></div>

 </body>

</html>

 

这是前台的页面,比较的简单,大家在练习的时候,注意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 "<a href=mailto:" + value + ">" + value + "</a>";

 }

 // 定义一个表格面板�

 var grid = new Ext.grid.GridPanel({

  id : 'student-grid',// 设置标识ID，方便以后引用！
  title : '人员信息管理�',// 标题
  // 显示数据的地方,注意这里的renderTo要和html文件中的div要一致!!
  renderTo : 'myUsers',// 显示表格的地方显示表格的地方

  sm : sm,// 复选框

  cm : cm,// 列模型

  ds : ds,// 数据源�

  stripeRows : true,// 加上行条纹

  loadMask : true,// 加载数据时遮蔽表格

  border : true,// 加上边框

  frame : true,// 显示天蓝色圆角框

  autoHeight : true,// 自动设置高度，这个配置很重要�

  width : 700,

  x : 1,// 设置初始位置横坐标�

  y : 1,// 设置初始位置纵坐标�

  // enableDragDrop : true,//容许行的拖曳

  collapsible : true, // 面板可以折叠

  // titleCollapse : true,// 单击表头任何地方都可以折叠�

  floating : true,// 设置浮动，能否拖动成功就靠它了,注意设置浮动后它就置顶了�

  // 实现拖曳效果，参考官方文档�
  draggable : {

   insertProxy : false,

   onDrag : function(e) {

    var pel = this.proxy.getEl();

    this.x = pel.getLeft(true);

    this.y = pel.getTop(true);

    var s = this.panel.getEl().shadow;// 拖曳中消除原位置的阴影�

    if (s) {

     s.realign(this.x, this.y, pel.getWidth(),

     pel.getHeight());

    }

   },

   endDrag : function(e) {// 拖曳结束后保存位置效果�

    this.panel.setPosition(this.x, this.y);

   }

  },

  // UI视图配置

  viewConfig : {

   forceFit : true

  // 强制适应分布宽度�

  },

  // 表格顶部动作或按钮工具栏

  tbar : new Ext.Toolbar({

   items : [{

    id : 'btnAdd',

    text : "添加�",

    handler : function() {

     Ext.MessageBox.alert("添加",

     "做添加的操作");

    }

   }, new Ext.Toolbar.SplitButton({}), {

    id : 'btnEdit',

    text : "编辑",

    handler : function() {

     Ext.MessageBox.alert("编辑",

     "做编辑的操作");

    }

   }, '-', {

    id : 'btnDel',

    text : "删除",

    handler : function() {

     Ext.MessageBox.alert("删除",

     "做删除的操作�");

    }

   }]

  }),

  // 表格底部分页工具栏

  bbar : new Ext.PagingToolbar({

   pageSize : 6,

   store : ds,

   displayInfo : true,

   displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',

   emptyMsg : "没有记录"

  })

 });

 // 给grid动态增加右键事件,rowcontextmenu是事件名，rightClickFn是事件触发的处理函数
 grid.on('rowcontextmenu', rightClickFn);

 var rightClickMenu = new Ext.menu.Menu({

  id : 'rightClickCont',

  items : [{

   id : 'rMenu1',

   handler : rMenu1Fn,// 点击后触发的事件

   text : '右键菜单1'

  }, {

   // id: 'rMenu2',

   // handler: rMenu2Fn,

   text : '右键菜单2'

  }]

 });

 function rightClickFn(grid, rowindex, e) {

  e.preventDefault();// 阻止浏览器默认右键效果�

  rightClickMenu.showAt(e.getXY());// 在右键点击的地方显示菜单rightClickMenu

 }

 function rMenu1Fn() {

  Ext.MessageBox.alert('right', '您可以自定义右键处理！');// 只锟斤拷一锟斤拷示锟斤拷

 }

});

 

大家可以好好看看这个js文件,这个是关键,呵呵!!

 

(3)后台的文件,extjs是平台无关,后台可以是.net,jsp,或php,主要生成RIA(富客户端的应用),这个后台返回的数据格式是json格式,这个是js的原生格式,是按照key-value进行整理的!!

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"
 import="java.util.*,org.leno.javabean.*,net.sf.json.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>grid</title>
 </head>
 <body>
  <%!private static List<Users> list = new ArrayList<Users>();
       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<Users> 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();
              %>
 </body>
</html>

(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）以及分页处理。

 

 

完工,有问题,可以联系,qq:296462311,呵呵!!

分享到：
| ExtJS 表格面板GridPanel完整例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics