《Ext JS 4.2实战》目录

第1章  ExtJS 4概述···················································································· 1

1.1  从Ext JS 4.0到Ext JS 4.07······································································· 1

1.2  从Ext JS 4.1到Ext JS 4.1.1a····································································· 1

1.3  从Ext JS 4.2到Ext JS 4.2.1······································································ 2

1.4  如何选择版本······················································································ 2

1.5  基础知识···························································································· 3

1.5.1  Ext JS的一些专用术语······················································································ 3

1.5.2  一些常见的配置项··························································································· 4

1.5.3  类的命名规则································································································· 5

1.6  关于调试···························································································· 5

1.7  小结·································································································· 6

第2章  ExtJS的MVC模式介绍······································································ 7

2.1  概述·································································································· 7

2.1.1  MVC模式概述································································································ 7

2.1.2  Ext JS的MVC模式·························································································· 7

2.2  组件查询的机制··················································································· 8

2.2.1  组件管理器：Ext.ComponentManager··································································· 8

2.2.2  组件的查询方式···························································································· 10

2.2.3  直接使用id查询组件······················································································ 12

2.2.4  组件中的查询······························································································· 12

2.3  控制器····························································································· 13

2.3.1  模型（models）···························································································· 14

2.3.2  存储（stores）······························································································ 14

2.3.3  视图（views）······························································································ 15

2.3.4  引用（refs）································································································· 15

2.3.5  init方法······································································································· 15

2.3.6  onLaunch方法······························································································ 15

2.4  小结································································································ 15

第3章  简单的CMS系统概述········································································ 16

3.1  基本功能·························································································· 16

3.2  系统的主要数据结构············································································ 16

3.2.1  文章类别表：T_Category················································································· 16

3.2.2  文章表：T_Content························································································ 19

3.2.3  标签表：T_Tag····························································································· 19

3.2.4  标签与文章关联表：T_TagInContent·································································· 19

3.3  SimpleMembership使用到的表································································ 20

3.3.1  用户信息表：UserProfile················································································· 20

3.3.2  账号信息表：webpages_Membership·································································· 20

3.3.3  第三方登录信息表：webpages_OAuthMembership················································· 21

3.3.4  用户角色表：webpages_Roles··········································································· 21

3.3.5  角色与用户关联表：webpages_UsersInRoles························································ 21

3.4  系统开发环境····················································································· 22

3.5  小结································································································ 22

第4章  使用Sencha Cmd创建脚本框架·························································· 23

4.1  概述································································································ 23

4.2  安装Sencha Cmd················································································· 23

4.2.1  运行环境配置······························································································· 23

4.2.2  安装Compass······························································································· 24

4.2.3  安装Sencha Cmd··························································································· 24

4.2.4  验证安装····································································································· 26

4.2.5  语法··········································································································· 27

4.3  创建应用程序····················································································· 27

4.4  应用程序的结构·················································································· 30

4.4.1  目录结构····································································································· 30

4.4.2  index.html···································································································· 32

4.4.3  bootstrap.css································································································· 32

4.4.4  bootstrap.js··································································································· 32

4.4.5  application.js································································································· 36

4.4.6  app.js·········································································································· 37

4.4.7  viewport.js···································································································· 38

4.4.8  Main.js········································································································ 39

4.5  关于主题和样式·················································································· 39

4.6  生成应用程序····················································································· 41

4.7  要注意的问题····················································································· 46

4.8  小结································································································ 46

第5章  搭建开发环境··················································································· 47

5.1  创建项目·························································································· 47

5.2  添加库文件························································································ 49

5.2.1  Json.NET····································································································· 50

5.2.2  实体框架（EntityFramework）·········································································· 50

5.2.3  ImageResizer································································································· 51

5.2.4  Dynamic Expression API·················································································· 53

5.2.5  Microsoft.AspNet.Web.Optimization··································································· 54

5.3  安装EntityFramework Power Tools··························································· 55

5.4  创建数据库························································································ 55

5.4.1  创建用户信息表···························································································· 56

5.4.2  创建账号信息表···························································································· 58

5.4.3  创建第三方登录信息表··················································································· 58

5.4.4  创建用户角色表···························································································· 58

5.4.5  创建角色与用户关联表··················································································· 58

5.4.6  创建文章类别表···························································································· 58

5.4.7  创建文章内容表···························································································· 59

5.4.8  创建标签表·································································································· 59

5.4.9  创建标签与内容关联表··················································································· 59

5.5  生成模型·························································································· 59

5.5.1  修改T_Category.cs类····················································································· 62

5.5.2  修改T_CategoryMap类··················································································· 63

5.6  导入Ext JS 脚本················································································· 63

5.6.1  导入脚本····································································································· 63

5.6.2  修改主题····································································································· 63

5.6.3  修改脚本访问路径························································································· 63

5.6.4  为Ext JS添加智能提示功能············································································· 64

5.7  创建首页·························································································· 64

5.8  添加本地化语言包··············································································· 66

5.9  关于全局变量····················································································· 67

5.10  小结······························································································· 70

第6章  数据传输的标准化············································································· 71

6.1  标准化的数据传输··············································································· 71

6.1.1  为什么要实现数据传输的标准化······································································· 71

6.1.2  标准化数据传输的好处··················································································· 71

6.2  如何实现标准化·················································································· 72

6.2.1  Ext JS的主要数据传输方式·············································································· 72

6.2.2  扩展代理，以实现数据传输的标准化································································· 73

6.2.3  在服务器端统一输出接口················································································ 78

6.2.4  统一的错误处理···························································································· 79

6.3  小结································································································ 83

第7章  登录与权限控制················································································ 84

7.1  权限控制的整体思路············································································ 84

7.2  初始化SimpleMembership提供者···························································· 84

7.3  启用角色管理····················································································· 88

7.4  登录窗口·························································································· 89

7.4.1  登录方式的选择···························································································· 89

7.4.2  创建登录窗口······························································································· 89

7.4.3  验证码图片·································································································· 99

7.4.4  调试登录窗口······························································································· 99

7.4.5  AccountController控制器··············································································· 101

7.5  登录后的处理··················································································· 109

7.6  小结······························································································· 112

第8章  主界面设计···················································································· 113

8.1  目前的主界面结构·············································································· 113

8.2  设计主界面······················································································ 113

8.2.1  主界面中包含的元素····················································································· 113

8.2.2  按钮在系统名称的最右边，采用标签页····························································· 114

8.2.3  按钮在应用程序标题下，不使用标签页····························································· 114

8.2.4  使用边框布局，左边功能菜单，右边标签页······················································· 115

8.2.5  桌面式应用程序··························································································· 116

8.2.6  主界面的选择······························································································ 116

8.3  实现主界面······················································································ 116

8.3.1  添加顶部视图······························································································ 116

8.3.2  修改主视图································································································· 121

8.3.3  实现退出功能······························································································ 122

8.3.4  修改密码窗口······························································································ 123

8.4  小结······························································································· 128

第9章  用户管理······················································································· 129

9.1  概述······························································································· 129

9.2  用户模型························································································· 129

9.3  存储······························································································· 131

9.3.1  用户存储···································································································· 131

9.3.2  引用存储···································································································· 132

9.4  用户视图························································································· 132

9.4.1  基本界面···································································································· 132

9.4.2  分页·········································································································· 137

9.4.3  排序·········································································································· 138

9.4.4  添加用户···································································································· 141

9.4.5  编辑用户···································································································· 147

9.4.6  删除用户···································································································· 148

9.4.7  重置密码···································································································· 152

9.4.8  允许登录列································································································· 153

9.5  小结······························································································· 155

第10章  图片管理····················································································· 156

10.1  概述····························································································· 156

10.2  模型····························································································· 157

10.2.1  目录模型·································································································· 157

10.2.2  文件模型·································································································· 157

10.3  存储····························································································· 158

10.3.1  目录存储·································································································· 158

10.3.2  文件存储·································································································· 159

10.4  图片管理视图·················································································· 159

10.4.1  基本界面·································································································· 159

10.4.2  加载目录树······························································································· 163

10.4.3  添加目录·································································································· 165

10.4.4  编辑目录名称···························································································· 171

10.4.5  删除目录·································································································· 173

10.4.6  刷新目录·································································································· 174

10.4.7  拖动目录·································································································· 175

10.4.8  加载文件·································································································· 177

10.4.9  通过拖动选择条目······················································································ 180

10.4.10  文件排序································································································· 180

10.4.11  搜索文件································································································· 183

10.4.12  修改文件名······························································································ 189

10.4.13  通过拖动移动文件····················································································· 192

10.4.14  删除文件································································································· 196

10.4.15  文件刷新功能··························································································· 198

10.4.16  显示文件总数··························································································· 198

10.4.17  文件上传································································································· 199

10.5  图片选择窗口·················································································· 203

10.6  小结····························································································· 205

第11章  文章管理····················································································· 206

11.1  概述····························································································· 206

11.2  模型····························································································· 206

11.2.1  文章类别模型···························································································· 206

11.2.2  文章模型·································································································· 207

11.3  存储····························································································· 207

11.3.1  文章类别存储···························································································· 207

11.3.2  文章存储·································································································· 208

11.3.3  标签存储·································································································· 208

11.4  文章类别视图·················································································· 209

11.4.1  基本界面·································································································· 209

11.4.2  加载文章类别树························································································· 211

11.4.3  添加文章类别···························································································· 212

11.4.4  编辑文章类别···························································································· 226

11.4.5  删除文章类别···························································································· 229

11.4.6  查看文章类别···························································································· 231

11.4.7  刷新文章类别···························································································· 235

11.4.8  拖动文章类别···························································································· 235

11.4.9  树渲染后选择根节点··················································································· 237

11.5  文章视图······················································································· 237

11.5.1  基本界面·································································································· 237

11.5.2  加载数据·································································································· 241

11.5.3  实现搜索功能···························································································· 247

11.5.4  突出显示标题列的查询值············································································· 257

11.5.5  添加文章·································································································· 258

11.5.6  编辑文章·································································································· 265

11.5.7  删除文章·································································································· 268

11.5.8  查看文章·································································································· 269

11.5.9  刷新········································································································ 270

11.5.10  通过拖动移动文章····················································································· 270

11.5.11  显示记录总数··························································································· 272

11.6  小结····························································································· 272

第12章  代码重构····················································································· 273

12.1  概述····························································································· 273

12.2  重构表单窗口·················································································· 273

12.2.1  概述········································································································ 273

12.2.2  表单窗口的共同点······················································································ 274

12.2.3  创建表单窗口···························································································· 274

12.2.4  重构文章编辑视图······················································································ 279

12.3  重构功能工具栏··············································································· 280

12.3.1  概述········································································································ 280

12.3.2  工具栏的共同点························································································· 280

12.3.3  功能工具栏······························································································· 281

12.4  重构文章视图·················································································· 289

12.5  重构文章类别视图············································································ 290

12.6  详细信息视图的重构········································································· 292

12.7  小结····························································································· 292

第13章  辅助功能····················································································· 293

13.1  历史记录······················································································· 293

13.2  状态管理······················································································· 294

13.3  能否将历史记录和状态管理结合起来····················································· 295

13.4  统一处理服务器错误········································································· 296

13.5  错误日志······················································································· 297

13.6  小结····························································································· 299

第14章  打包和发布·················································································· 300

14.1  脚本打包······················································································· 300

14.1.1  概述········································································································ 300

14.1.2  修改index.html文件···················································································· 300

14.1.3  创建Viewport.scss······················································································ 300

14.1.4  生成应用程序···························································································· 301

14.1.5  修改all-classes.js························································································ 304

14.1.6  最后的测试······························································································· 304

14.1.7  上传插件的臭虫························································································· 305

14.2  发布····························································································· 306

14.2.1  Web Deploy······························································································ 306

14.2.2  发布应用程序···························································································· 306

14.2.3  Index.Release.cshtml文件············································································· 308

14.2.4  修改发布配置文件······················································································ 309

14.3  部署····························································································· 312

14.4  小结····························································································· 314

第15章  ExtJS的跨平台特性······································································ 315

15.1  Ext JS跨平台特性简介······································································· 315

15.2  Ext JS跨平台特性演示······································································· 315

15.2.1  概述········································································································ 315

15.2.2  搭建Java开发环境····················································································· 316

15.2.3  复制Scripts目录························································································· 316

15.2.4  创建首页文件···························································································· 317

15.2.5  SimpleCMS.Url类······················································································· 317

15.2.6  添加Json-lib······························································································ 318

15.2.7  辅助类ExtJS······························································································ 318

15.2.8  Servlet：GetUserInfo··················································································· 319

15.2.9  GetUserInfo.json························································································· 320

15.3  小结····························································································· 320