saviorzuo
- 浏览: 19893 次
- 性别:
- 来自: 上海
-
最近访客 更多访客>>
文章分类
最新评论
-
tonytony3：
好
spring AOP(3) -
Sq_I：
楼主能否把例子发给我一下530149995@qq.com非常感 ...
ExtJS专题-TreePanel -
Sq_I：
楼主能否把例子发给我一下
ExtJS专题-TreePanel
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）以及分页处理。
这里涉及到三个文件,包括前台的grid.html,grid.js和后台的resJson.jsp，我们来分别瞧瞧：
（1） grid.html,这里要说明的是DOCTYPE不能设置错误，否则IE6.0会显示不出表头的列名。还有就是要汉化提示信息，注意导入ext-lang-zh_CN.js
<!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>
（2） grid.js,我们的主要功能就在这个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.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : 'resJson.jsp'
}),
reader : new Ext.data.JsonReader({
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 : 6
}
});
// 定义复选框
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 : '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', '您可以自定义右键处理！');// 只是一个示例
}
});
（3） resJson.jsp，前面只是前台部分，页面的动态数据就要用HTTP协议从后台组件上获取，这样，只要你实现一种能够响应HTTP请求的后台WEB组件即可，你可以写一个Servlet，写一个Struts的Action，或者是一个JSP都行。我们这里方便起见，做的是一个JSP，在这个JSP里使用了json-lib的包.这是一个用Java操作JSON格式数据的工具包，大家可以从网上下载。一般跑过我第一个Extjs应用的人这些包应该都准备好了。我们这里模拟后台实现，并不需要访问数据库，所以很方便。大家要注意的是最后两行代码必须加上，不然服务器传回客户端的就会带上很多与JSON格式无关的HTML标签信息，这样Extjs就无法识别了。
<%@ 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>Insert title here</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>
还有一个非常简单的JavaBean这里也给大家贴出来：
package org.leno.javabean;
public class Student {
private int id;
private String name;
private char sex;
private String birthday;
private String email;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public char getSex() {
return sex;
}
public void setSex(char sex) {
this.sex = sex;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
怎么样，是不是非常简单？并不多的代码却完成了很多复杂却实用的功能。希望大家能从上面的例子中好好理解ExtJS前台展现的制作和后台交互的方式。这里要强调的是，大家一定要搭建好ExtJS的环境和导入json-lib的相关包，特别是核心的JS,CSS还有图片数据，一定要放在正确的路径。图：
表格由类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）以及分页处理。
这里涉及到三个文件,包括前台的grid.html,grid.js和后台的resJson.jsp，我们来分别瞧瞧：
（1） grid.html,这里要说明的是DOCTYPE不能设置错误，否则IE6.0会显示不出表头的列名。还有就是要汉化提示信息，注意导入ext-lang-zh_CN.js
<!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>
（2） grid.js,我们的主要功能就在这个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.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : 'resJson.jsp'
}),
reader : new Ext.data.JsonReader({
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 : 6
}
});
// 定义复选框
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 : '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', '您可以自定义右键处理！');// 只是一个示例
}
});
（3） resJson.jsp，前面只是前台部分，页面的动态数据就要用HTTP协议从后台组件上获取，这样，只要你实现一种能够响应HTTP请求的后台WEB组件即可，你可以写一个Servlet，写一个Struts的Action，或者是一个JSP都行。我们这里方便起见，做的是一个JSP，在这个JSP里使用了json-lib的包.这是一个用Java操作JSON格式数据的工具包，大家可以从网上下载。一般跑过我第一个Extjs应用的人这些包应该都准备好了。我们这里模拟后台实现，并不需要访问数据库，所以很方便。大家要注意的是最后两行代码必须加上，不然服务器传回客户端的就会带上很多与JSON格式无关的HTML标签信息，这样Extjs就无法识别了。
<%@ 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>Insert title here</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>
还有一个非常简单的JavaBean这里也给大家贴出来：
package org.leno.javabean;
public class Student {
private int id;
private String name;
private char sex;
private String birthday;
private String email;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public char getSex() {
return sex;
}
public void setSex(char sex) {
this.sex = sex;
}
public String getBirthday() {
return birthday;
}
public void setBirthday(String birthday) {
this.birthday = birthday;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
怎么样，是不是非常简单？并不多的代码却完成了很多复杂却实用的功能。希望大家能从上面的例子中好好理解ExtJS前台展现的制作和后台交互的方式。这里要强调的是，大家一定要搭建好ExtJS的环境和导入json-lib的相关包，特别是核心的JS,CSS还有图片数据，一定要放在正确的路径。图：
- 大小: 62.7 KB
分享到：
发表评论
-
ExtJS专题-TreePanel
2011-02-22 10:15 1775这次我们来学习下ExtJS中的树面板（TreePanel），很 ... -
ExtJS专题-FormPanel
2011-02-21 12:54 1254OK，前面我们已经学过了GridPanel，TabPanel， ... -
ExtJS笔记--Ext..Button组件
2011-02-17 19:47 761Ext..Button组件 例： Ext.QuickTi ... -
Ext Form全攻略1（转）
2011-02-17 19:21 8081 Form概述 Formpanel是一个重要的页面组件，在具 ...
相关推荐
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320...
它提供了大量的组件（如表格、树形视图、表单、面板等）和布局管理，使得开发者可以轻松创建复杂的 web 用户界面，而无需过多关注底层的 HTML、CSS 和 JavaScript 编码。 Slate 主题是 ExtJS 的一个重要组成部分，...
extjs-basex.js extjs-basex.js extjs-basex.js
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
ExtJS基于组件模型，允许开发者构建复杂的用户界面，这些组件可以是按钮、表格、表单、面板等。每个组件都有自己的属性、方法和事件，通过灵活组合这些组件，可以创建出功能丰富的Web应用。 在提供的文件"ExtJS 2.0...
使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...
extjs4.2-2
深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320深入浅出EXTJS241-320
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
ExtJS4.0-API Ext4.0-API Ext4 ExtJS4 API 学EXTJS4的好东西...
这个名为"ExtJS--Windows.rar"的压缩包显然是关于如何使用ExtJS来模仿Windows桌面应用的示例或教程。让我们深入探讨一下ExtJS以及如何利用它来实现这样的效果。 1. **ExtJS框架**：ExtJS是由Sencha公司开发的一个...
【Extjs--OA 自动办公系统】是一款基于ASP.NET技术和EXTJS前端框架开发的办公自动化系统，采用典型的三层架构设计，旨在提供高效、便捷的办公流程管理。此系统的实现涉及了多个关键知识点，下面将详细阐述这些技术...
ExtJS 是一个强大的JavaScript 库，专用于构建富客户端Web应用程序。它提供了丰富的组件和布局管理功能，使得开发者能够创建复杂、交互式的用户界面。在本篇博客中，我们将聚焦于"accordion布局"这一特性，它是ExtJS...
EXTJS 是一个基于JavaScript的富客户端应用开发框架，主要用于构建具有丰富用户界面的Web应用程序。EXTJS 3.2-3.3版本是EXTJS框架的一个重要阶段，它提供了大量的组件、布局、数据绑定和事件处理机制，为开发者带来...
Extjs6.2 生成的admin-dashboard官方模板
它提供了丰富的组件库，包括表格、面板、表单、图表等，以及强大的数据绑定机制和布局管理，使得开发者能够创建功能强大的、交互性强的前端界面。ExtJS 4 版本带来了许多改进，如新的布局系统、优化的性能以及更好的...
3. **UI组件**：ExtJS 提供了众多预定义的UI组件，如按钮、表格、面板、菜单等。6.2.0版本可能添加了新的组件，或者对现有组件进行了视觉和功能上的升级，以满足更广泛的设计需求。 4. **表单处理**：ExtJS 对表单...
这通常是EXTJS4中的Grid面板的数据源，可以通过store获取。确保数据是干净且适合Excel格式的，例如，处理日期和数字格式。 2. **数据转换**：将数据转换成Excel可以理解的格式。这可能涉及到将数据转换为CSV（逗号...