AnyFo - ExtJS2.0
移 魂 大 法
主编：安坤
版本：V.081127
目录
目录.....................................................................................................................................................2
1 环境搭建..........................................................................................................................................6
2 布局..................................................................................................................................................7
2.1 Border 布局...........................................................................................................................7
2.1.1 效果............................................................................................................................7
2.1.2 源码............................................................................................................................7
2.2 Accordion 布局....................................................................................................................11
2.2.1 效果..........................................................................................................................11
2.2.2 源码..........................................................................................................................11
2.2.3 无 title 布局..............................................................................................................13
3 事件机制........................................................................................................................................15
3.1 响应 html 控件事件............................................................................................................15
3.1.1 效果..........................................................................................................................15
3.1.2 页面..........................................................................................................................15
3.1.3 JS 文件.....................................................................................................................16
3.2 响应 ExtJS 控件事件..........................................................................................................16
3.2.1 JS 代码.....................................................................................................................16
4 窗体................................................................................................................................................17
4.1 基本窗体.............................................................................................................................17
4.1.1 普通用法..................................................................................................................17
4.2 Panel 中动态加载要显示的数据.......................................................................................18
4.3 Alert 提示框........................................................................................................................19
4.3.1 效果..........................................................................................................................19
4.3.2 JS 文件.....................................................................................................................19
4.3.3 页面..........................................................................................................................19
4.4 Confirm 确认框..................................................................................................................20
4.4.1 效果..........................................................................................................................20
4.4.2 JS 文件.....................................................................................................................20
4.4.3 页面..........................................................................................................................21
4.5 Prompt 输入框....................................................................................................................22
4.5.1 效果..........................................................................................................................22
4.5.2 JS 文件.....................................................................................................................22
4.5.3 页面..........................................................................................................................22
5 表单................................................................................................................................................24
5.1 表单面板.............................................................................................................................24
5.1.1 普通表单面板..........................................................................................................24
5.2 Ext.form.TextField..............................................................................................................27
5.2.1 隐藏框......................................................................................................................27
5.3 Ext.form.ComboBox...........................................................................................................27
5.3.1 JS 文件.....................................................................................................................27
5.3.2 HTML.......................................................................................................................27
5.4 Ext.form.DateField..............................................................................................................28
5.4.1 JS 文件.....................................................................................................................28
5.5 密码框.................................................................................................................................28
5.5.1 JS 文件.....................................................................................................................28
5.6 上下切分开的 Panel...........................................................................................................29
5.6.1 定义切分 Panel........................................................................................................29
5.6.2 创造切分 Panel........................................................................................................30
6 Tree.................................................................................................................................................30
6.1 从 JSP 文件加载数据.........................................................................................................30
6.1.1 效果..........................................................................................................................30
6.1.2 代码..........................................................................................................................31
6.2 从后台加载数据.................................................................................................................33
6.2.1 效果..........................................................................................................................33
6.2.2 JS 文件.....................................................................................................................33
6.2.3 后台..........................................................................................................................34
6.2.4 页面..........................................................................................................................35
6.3 带多选框的树.....................................................................................................................36
6.3.1 效果..........................................................................................................................36
6.3.2 添加多选框..............................................................................................................37
6.3.3 得到选中节点列表..................................................................................................37
6.4 延迟加载的稳定 Tree.........................................................................................................37
6.5 其他操作.............................................................................................................................38
6.5.1 展开所有节点..........................................................................................................38
6.5.2 重新加载所有节点..................................................................................................38
6.5.3 出现滚动条..............................................................................................................38
7 Tab..................................................................................................................................................39
7.1 效果.....................................................................................................................................39
7.2 代码.....................................................................................................................................39
7.2.1 JS 文件.....................................................................................................................39
7.3 Tab 页自动静态立即加载页面..........................................................................................40
7.3.1 JS 文件.....................................................................................................................40
7.4 Tab 动态延迟加载页面......................................................................................................41
7.4.1 JS 文件.....................................................................................................................41
8 Grid.................................................................................................................................................42
8.1 从内存中加载数据.............................................................................................................42
8.1.1 效果..........................................................................................................................42
8.1.2 JS 文件.....................................................................................................................42
8.1.3 页面..........................................................................................................................43
8.2 添加多选按钮和排序功能.................................................................................................44
8.2.1 效果..........................................................................................................................44
8.2.2 JS 文件.....................................................................................................................44
8.2.3 页面..........................................................................................................................46
8.3 获得选中数据.....................................................................................................................47
8.3.1 效果..........................................................................................................................47
8.3.2 JS 源码.....................................................................................................................47
8.3.3 页面..........................................................................................................................49
8.4 从后台加载数据.................................................................................................................50
8.4.1 包..............................................................................................................................50
8.4.2 打包结果数据的后台类..........................................................................................50
8.4.3 后台 Servlet..............................................................................................................51
8.4.4 JS 代码.....................................................................................................................53
8.5 可编辑的表格.....................................................................................................................55
8.5.1 效果..........................................................................................................................55
8.5.2 JS 文件.....................................................................................................................55
8.5.3 页面..........................................................................................................................58
8.6 获得被修改数据.................................................................................................................59
8.6.1 效果..........................................................................................................................59
8.6.2 JS 文件.....................................................................................................................59
8.7 分页 Grid.............................................................................................................................62
8.7.1 效果..........................................................................................................................62
8.7.2 JS 页面.....................................................................................................................62
8.7.3 后台..........................................................................................................................64
8.7.4 页面..........................................................................................................................65
9 数据显示........................................................................................................................................66
9.1 模板显示 - XTemplate.......................................................................................................66
9.1.1 效果..........................................................................................................................66
9.1.2 JS 文件.....................................................................................................................66
9.2 复杂显示 – DataView........................................................................................................67
9.2.1 效果..........................................................................................................................67
9.2.2 JS 文件.....................................................................................................................68
9.2.3 页面..........................................................................................................................70
10 AJAX............................................................................................................................................71
10.1 表单提交...........................................................................................................................71
10.1.1 JS 文件...................................................................................................................71
10.1.2 后台 Servlet 代码...................................................................................................72
10.1.3 编码格式................................................................................................................73
10.2 隐藏表单提交...................................................................................................................73
11 其他..............................................................................................................................................73
1.1 整合 Struts2.........................................................................................................................73
1.2 页面的初始化效果.............................................................................................................74
1.2.1 页面的<style>中的代码.........................................................................................74
1.2.2 页面的<body>中的代码.........................................................................................75
1.2.3 Js 文件的 Ext.onReady 中的代码...........................................................................75
