ExtJS 表格面板GridPanel完整例子 -

aa00aa00

浏览: 331482 次
性别:
来自: 沈阳

最近访客更多访客>>

zeuskim

qq705570553

beyondkevin

0725

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

ExtJS 表格面板GridPanel完整例子

博客分类：

Extjs学习笔记

EXT json CSS JavaScript JSP

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

贴出完整的代码:分为3个部分

(1)grid.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>

</style>

</head>

<body>

</body>

</html>

比较的简单,呵呵!!

// 核心js文件
Ext.onReady(function() {

Ext.QuickTips.init();// 浮动信息提示

Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地

// 定义数据源为远程代理和JSON数据格式�
var ds = new Ext.data.Store({
  proxy : new Ext.data.HttpProxy({
   // 这个url,是后台返回的数据,这个url可以是Struts的Action,也可以是servlet,这里为了方便就是一个jsp文件
   url : 'resJson.jsp'

}),

  reader : new Ext.data.JsonReader({
   // 这个totalProperty和root属性,要和后台的文件resJson.jsp中的保持一致!!
   totalProperty : 'totalProperty',

root : 'root'

}, [{

name : 'id'

}, {

name : 'name'

}, {

name : 'sex'

}, {

name : "birthday",

type : "date",

dateFormat : "Y-n-j"

}, {

name : 'email'

}])

});

// 加载首页数据，每页显示10条记录�

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 : 'name'

}, {

header : '性别',

width : 40,

dataIndex : 'sex',

renderer : changeSex

// 红男绿女

}, {

header : '出生日期',

dataIndex : 'birthday',

renderer : Ext.util.Format.dateRenderer('Y年m月d日')

// 格式化日期

}, {

header : '电子邮件',

width : 120,

dataIndex : 'email',

renderer : sendEmail

// 单击启动邮件客户端发送邮件

}]);

// 设置所有列字段默认排序

cm.defaultSortable = true;

// 按要求渲染性别的函数�

function changeSex(value) {

if (value == '男') {

return "<span style='color:red;font-weight:bold;'>男</span>";

} else {

return "<span style='color:green;font-weight:bold;'>女</span>";

}

//按要求渲染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 : 'myGrid',// 显示表格的地方显示表格的地方

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文件,前台的html文件,是通过这个js文件.

(3)resJson.jsp(后台文件,这个文件可以是Struts的action或者servlet,这里方便就直接是一个jsp文件)

<%@ 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<Student> list = new ArrayList<Student>();
       static {
              for (int i = 0; i < 100; i++) {
                     Student stu = new Student();
                     stu.setId(i);

stu.setName("LENO" + i);

if (i % 2 == 0) {

stu.setSex('男');
} else {

stu.setSex('女');

}
stu.setBirthday("2003-12-11");

stu.setEmail("LENO@126.com");

                     list.add(stu);
              }
       }%>
              <%
                     request.setCharacterEncoding("UTF-8");

response.setCharacterEncoding("UTF-8");

//System.out.println(request.getParameter("name") + " attribute");

JSONObject json = new JSONObject();
String strStart = request.getParameter("start");

String strLimit = request.getParameter("limit");

int start = Integer.parseInt(strStart);

int limit = Integer.parseInt(strLimit);

List<Student> 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>

好了,可以测试了,大家在测试的时候,要注意extjs的包的导入(json-lib的6个包文件),和相应的extjs核心的css和js文件的路径.

aa00aa00

EXTJS.rar (1.6 MB)
下载次数: 241

分享到：

Extjs-GridPanel面板(原创) | extjs分页

2010-01-07 12:45
浏览 13519
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJS 表格面板GridPanel完整例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtJS 表格面板GridPanel完整例子

评论

发表评论

相关推荐

Ext Js分页显示示例原理详解

Extjs-GridPanel面板(原创)

extjs分页

extjs2.0:GridPanel分页例子

Extjs2.0之GridPanel基本表格

Ext.Panle Ext.TabPanel Ext.Viewport2

extjs 之Ext.Panle Ext.TabPanel Ext.Viewport

extjs 之Border区域布局

extjs 之显示一个窗口

extjs之panel面板

extjs 之helloworld

最近访客更多访客>>