- 浏览: 327136 次
- 性别:
- 来自: 沈阳
-
文章分类
- 全部博客 (160)
- Hiberate (13)
- struts+spring+hibernate (8)
- tomcat服务器 (3)
- sql server2000数据库 (1)
- JSTL标签 (4)
- 数据库 (1)
- jsp (3)
- mysql (4)
- xml (2)
- 字符串操作 (6)
- js (2)
- 过滤器 (0)
- dwr (2)
- Extjs学习笔记 (12)
- java文件 (2)
- struts错误记录 (2)
- struts经验技巧 (2)
- struts+spring+ibatis (3)
- 学习积累--分页的实现过程 (8)
- 递归 (1)
- 工具使用 (1)
- swfupload批量上传 (1)
- flex+webservice (1)
- 精彩文章分享 (0)
- flex+eclipse开发环境 (1)
- DB2数据库 (2)
- ssh+pager taglib分页实现 (2)
- java (0)
- java 异常 (2)
- mylipse6.5 环境内存溢出 (2)
- java 操作word文件 (1)
- 异常整理 (1)
- sql server 2005使用心得 (3)
- jdbc数据库封装 (1)
- javaMail 收发邮件 (1)
- 数据库设计 (1)
- jfreechart图表研究 (1)
- ibatis 学习积累 (1)
- 强制固定表格 (1)
- struts+hibernate (1)
- 分页标签的使用 (1)
- 基于mediawiki的安装心得 (1)
- mediawiki (0)
- Sturs2+Spring2.5+Hibernate3.5+compass 整合 (1)
- RestEasy (3)
- Date 日期公共类整理 (1)
- Excel (8)
- JAVA生成PDF文件 (1)
- Struts1.2+Jquery+Hibernate (1)
- 数据库连接池配置 (0)
- ANT 学习实例 (2)
- 英语学习总结 (1)
- Google动画脚本收藏 (1)
- 20111012 Google动画脚本 (0)
- JQUERY资料整理 (2)
- java图片处理 (1)
- Map集合 (1)
- JAVA 整理AD资料 (2)
- JAVA热启动 (3)
- JAVA操作XML (1)
- TOMCAT6连接池配置问题解决方案 (1)
- JAVA调用DLL学习 (1)
- JAVA移动应用(发送手机短信) (2)
- JAVA发送手机短信 (1)
- iReport报表使用心得 (2)
- 解决Ireport生成PDF报表中文乱码问题 (1)
- iReport使用 (1)
- 全文搜索 compass (1)
- SVN管理 (1)
- Myeclipse8.5 工具编译 (1)
- ibm appscan 扫描问题汇总解决 (1)
- Rose建模设计工具 (1)
- oracle (1)
- MyEclipse8.5注册码(8.6也可以) (0)
- oracle job定时触发执行 (1)
- java Excel导出公用类 (1)
- Highcharts图表 (1)
- excel打包成zip文件,并且提供加密功能 (0)
- excel打包成zip文件 (1)
- 并且提供加密功能 (1)
- vue学习 (1)
- WebStorm使用 (1)
最新评论
-
ahkoun:
楼主棒棒哒,下载后可以直接运行
使用 RestEasy 和 Apache Tomcat 构建 RESTful Web 服务 -
520920:
真的可以了,很棒!
java.lang.Exception: DEBUG -- CLOSE BY CLIENT STACK TRACE -
Yellow013:
不错的例子。
使用 RestEasy 和 Apache Tomcat 构建 RESTful Web 服务 -
huahoucun:
passwd = null; env.put(Context. ...
JAVA 实现AD验证 -
来迟了:
http://www.smschinese.cn/api.sh ...
JAVA发送手机短信
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>
<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/grid.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="myGrid"></div>
</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
发表评论
-
Ext Js分页显示示例原理详解
2010-01-19 16:14 4544前几天我们项目组讨论给**公司关于**产品做一个功能展示的用例 ... -
Extjs-GridPanel面板(原创)
2010-01-08 09:41 6706用GridPanel做了一个小的练习,也是方便大家对GridP ... -
extjs分页
2010-01-06 15:43 1736<!DOCTYPE HTML PUBLIC " ... -
extjs2.0:GridPanel分页例子
2010-01-06 14:05 2811<!DOCTYPE html PUBLIC " ... -
Extjs2.0之GridPanel基本表格
2010-01-05 15:17 1427<!DOCTYPE html PUBLIC " ... -
Ext.Panle Ext.TabPanel Ext.Viewport2
2010-01-05 14:26 1232<link rel="stylesheet&q ... -
extjs 之Ext.Panle Ext.TabPanel Ext.Viewport
2010-01-05 14:16 1932<link rel="stylesheet&q ... -
extjs 之Border区域布局
2010-01-05 14:09 1264<link rel="stylesheet&q ... -
extjs 之显示一个窗口
2010-01-05 13:58 1099<link rel="stylesheet&q ... -
extjs之panel面板
2010-01-05 13:50 1187<link rel="stylesheet&q ... -
extjs 之helloworld
2010-01-05 13:44 1573<link rel="stylesheet&q ...
相关推荐
ExtJS的GridPanel导出excel文件,方便快捷易懂!
Extjs例子Extjs例子Extjs例子Extjs例子Extjs例子
ExtJs表格点击超链接获取行的值,和各种获取节点值的方法
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
NULL 博文链接:https://zero9842.iteye.com/blog/674722
Extjs表格合并代码, 由于ie6以外的浏览器的盒模型比较怪异(主因还是我自身不擅处理CSS),列头与数据列的边框有些对不齐(当前的效果已经是尽了最大努力了)
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
此文件用于项目首页内容,使用了ExtJs中的GridPanel
extjs表格、树控件
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
ExtJs完整例子ext+dwr,希望能给需要地兄弟提供帮助
NULL 博文链接:https://zxf-noimp.iteye.com/blog/629829
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
Extjs 表格增删改例子 附加js表格例子
本文为大家详细介绍下ExtJs如何设置GridPanel表格文本垂直居中,具体实现代码及截图如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
extjs动态表格例子
ExtJs4 详细、讲解例子,网上搜索的一些例子,拉下来的
资源名称:获取ExtjS表格的值_ ExtJS_3.4 cellSelectModel资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
Extjs4.1 小例子(适合extjs初学者学习使用).直接导入myeclipse即可