一, 使用环境
这一点写在前面, 是为了方便大家在找资料的时候可以直接定位环境版本.
ExtJS 版本 6.2 中文官方网站提供版本, 网站地址 http://extjs.org.cn/node/793
开发环境 .net 随便哪个版本
使用工具 visual studio 2015
二, 自学初衷
在这里要说明一下本人真的是初学 Ext 6.x(未入门), 虽然 5 年前用过 Ext 3.x, 但也只是觉得 Ext 在界面优化方面做的很好, 对于 Ext 和 Sencha 来说真的是知之甚少, 所以如果有什么说的不对的, 希望大拿们帮我指正. 本次因为是重写了一个公司的烂尾项目, 不能用公司的 UI 做界面, 所以才想到了用 Ext 来做界面. 而且在看了 Ext 6.x 的界面之后, 确实是心动了.
在学习 Ext 6.x 的时候并不是没在网上找资料, CSDN 上的资源都需要积分, 但由于好几年没有使用 CSDN, 以前的积分都过期了, 所以直接就忽视了 CSDN. 在 cnblogs 上也有很多资料, 但是也只能学习一个大概, 整体思路不太能碰撞在一起, 所以一边看也要一边结合 Ext 6.2 api http://docs.sencha.com/extjs/6.2.0/classic/Ext.html 和官方提供的实例 http://examples.sencha.com/extjs/6.5.3/examples 才能勉强看懂一些.
为什么选择 Ext 6.2 这个版本? 在本次结合 Ext 做项目之前, 官方的版本已经到了 6.5.3, 但是从官网申请下载最新版本的时候, 迟迟没有收到邮件. 中文官网只提供 6.2 版本的下载, 所以只能用 6.2 版本作为熟悉和练手用了. 不过还是感觉 6.5.3 在界面优化上又更漂亮一些, 以后如果有机会还是使用 6.5.3 吧.
写这篇自学笔记的初衷, 其实最近学的比较累, 过去三天的时间几乎都是投入在其中, 如果不能把自己学的整理一下的话, 感觉有点对不起自己, 当然也是为了自己以后查看的时候, 不用再绕弯路. 那么下面直接进入正题. 在本次学习笔记中, 以模仿官方提供的 template 中的 admin-dashboard 实例为主线.
三, ExtJS 6.x 基础说明
这一部分, 其实不能完全叫基础说明, 本人是没有系统的进行过学习的, 之前也没有接触过 mvc 和 mvvm 的项目, 所以只能是自己学习的时候重点了解了哪些, 在这里记录一下. 说的不对的请指正.
在这里要引用一下九兄的文章 https://www.cnblogs.com/humanxiaoman/p/5023256.html , 这里介绍了 ExtJS 6 的核心 js 和样式. 当然这篇文章里也说明了 ExtJS 6 也可以和 ExtJS 3.x 一样, 直接调用 ExtJS 的控件进行界面的渲染.
然后还是引用一下九兄的另外一篇文章 http://www.cnblogs.com/humanxiaoman/p/5024048.html , 这里主要介绍了我们这次的主角 ExtJS 6.x 的开发模式 --MVC.
在 MVC 开发模式下, 主要学习的是 View(视图, 渲染界面),Controller(控制器, 编写操作逻辑),Model(数据模型) 这三个内容. 这三部分内容具体怎么运作, 之后会在我完全模仿官方例子的时候再做说明.
这里先展示一下我的项目的结构目录树, 其中:
app -- 项目目录, 存放整个项目需要用到的前, 后台代码
controller -- 控制器目录, 存放所有的控制器
handler -- 一般处理文件目录, 用来处理后台代码逻辑
model -- 数据模型目录, 用来存放所有的数据模型
store -- 数据源目录, 在之前用 ExtJS 3.x 的时候, 我们就知道 ExtJS 中各种容器控件, 绑定的数据源都为 store 类型, store 还有一个好处就是可以异步获取数据, 非常方便. 这里用来存放所有的数据源
view -- 视图界面目录, 用来渲染界面展示效果
application.js -- 程序基类的定义
CSS -- 存放所有样式文件
JS -- 存放 ExtJS 的基类以及派生类
app.js -- 程序的主入口, 这个入口之后会重点说明, 因为网上有的说要直接在页面上引用, 而官网的例子却没有这么做, 所以之后会有一个说明.
bootstrap.js -- 官方的例子中调用的一个起始脚本, 主要工作是判断当前程序是在电脑还是手机端使用, 用来加载不同的 *.json 文件 (其实主要就是为了区分调用 classic.json 和 modern.json)
classic.json -- 电脑端需要调用的 json 配置, 因为我们只在电脑端用, 所以只在项目中做这一个 json 文件. 这里其实就是把一个 json 串以文件的形式进行了存储, 需要注意的是, 在 json 文件中可以把每一块内容都换行, 美化之后方便我们阅读和修改, 但美化之后不可以注释, json 串最后还是返回一行内容, 所以注释符号会影响后面所有的内容, 如果有不需要的 json 内容, 直接删掉就好.
index.html -- 承载脚本也样式的 html 页面. 为什么不用. net 的 aspx? 因为这个页面不需要写后台服务器端的逻辑.
web.config -- asp.net 的项目, 你们都懂得.
另外, 这里还要说明一下. 在查看官方的 api 的时候, 会有 classic 和 modern 之分, 两者呈现的界面效果也是不一样的, 这一点 6.5.3 版本更明显. ExtJS 不知从哪个版本开始, 就可以做移动端 app 软件了, 所以 classic 就是经典的电脑端的, 而 modern 则是手机移动端的. 之前在说 bootstrap.js 的时候提到他可以区分 classic 和 modern, 其实是为了可以让一个程序兼容电脑和手机.
这里还要再提几个常用函数:
Ext.application({config}) -- 看很多资源上介绍他是程序的主入口. 个人理解, 他设定了你此次项目的命名空间, 方便 mvc 模式运转, 可以在这里设定起始加载页面 (这个页面指 view 里的脚本), 并加载一些其他需要用到的 js 脚本代码. 在查看官方的实例中时, 发现第一个被调用的其实是 bootstrap.js 中的 Ext.Microloader.run();, 不过之前也说过了, bootstrap.js 主要是为了判断需要加载哪个 json 文件, 并在在里面写了一些处理 json 配置项的逻辑.
Ext.define('命名空间. 文件夹. 文件名',{config}) -- 定义一个类. 我们后续用到的所有的 view,controller,model,store 都和他脱不开关系.
extend -- 继承一个类. 一般是用来继承 ExtJS 的基类的. 个人理解这样可以更方便 ExtJS 理解我们到底定义了一个什么东西.
requires -- 加载一些类. 个人理解他就是为了我们可以调用到某一个类, 然后需要在这里加载.
四, 未完待续..
本来打算是要整理的内容还要比这些多一点, 但是今天整理的有点晚了, 其他的稍后找个时间再进行整理吧, 不过最近项目工期比较紧, 下次看来要抽一个时间比较多的空了. 这里先放一个我模仿官方实例做的一个框架的界面图, 只有首页的 toolbar 和菜单树, 如果后续再整理的话, 内容肯定会更丰富一些了.
来源: http://www.bubuko.com/infodetail-2649984.html