ExtJS 使用感悟

前言

各位前辈在上小弟拱礼，小弟唤作查查，何为查查，与渣渣者无水矣，意在小弟虽初出茅庐然已成自我，自认非渣渣尔，然则门下自识术业未成当以与人谦逊见贤思齐，遂以铭。余非师出名门，然从业两载有余，闲暇之时拜读金典，已有些许文章，虽略显轻浮，但玉不雕不成器，在下献丑与众位点拨，全当玩耍，不当之处望各位雅正。

（这逼装的怎么样）

---

背景

现在市场上流传着很多近几年新生的优秀框架，虽然ExtJS发布的时间很早，现在应该算是古董级别的了，在当时也提出了很多超前的思想如：依赖注入，模块化等，现在一代比一代更优秀，但貌似市场上使用的厂子并不是很多，也有人对它的看法还停留在三代的版本上（现在已经到六代了），本人比较热衷社区讨论，但很少有人对ExtJS有最新的认识，一直在找相关方面的文章，但要么是比较陈旧的，要么是手册类的，因而不才整理出这篇拙作与众位把玩。

巨人ExtJS

ExtJS这个框架有些年头了（07年发布），对于一些从业时间有段时间的人来说都从各方面了解过，有人评价说它“功能丰富，无人能出其右”，但缺点也是存在的，太大，学习曲线陡峭，但这些缺点在我认为确实相对的，如JQuery UI等。

在这里称它为“巨人”一点都不为过，

第一，一般的小型项目hold不住这个巨人，因为收费和学习曲线陡峭很多小公司直接就不考虑它。

第二，身躯太庞大，丰富的组件导致它太重，非大中型管理系统很多难将它的特点发挥出来，它在复杂的业务处理中能节省出大量精力，也就是开发速度快，可以说一个中小型子系统，让一个熟练的前端在一到两周就全部能完成，还是不加班的那种。

第三，就是不在乎你用不用，反正老子是给大厂子做的。

有人说过它丑，烦请查阅07年以前的富客户端长什么样，大家的都知道前端框架都会有自定义样式的设定，当然ExtJS1.0也有，不过那时候多数情况下前端是由后端人员来做的，再加上学习曲线陡峭，所以很少去自定义CSS。且自带那几套皮肤，时间长了审美疲劳之后觉得有点丑，现在看来较之落后，不过现在有好几套自带皮肤，同时像HTML5 CSS3等新标准都已经支持，而且在兼容性方面优化的相当不错，几乎可以不用操心。

相比较同时期的JQuery，ExtJS应该说是一个完整的前端框架，而JQuery是一个扩展库，类比Easy UI是在晚于ExtJS之后的13年发布的，在默认的皮肤和样式上它是照搬ExtJS的classic皮肤的样式，相对ExtJS它比较轻，基于JQuery容易扩展，自己写样式也方便，不是那么干涩让人不太容易琢磨。但熟知JavaScript设计模式的人都知道，JQuery很容易没有编码结构可言，而ExtJS可以说已经很接近面向对象这个概念。

之后在13年发布的ExtJS 4以及后续版本，可以使用Sencha cmd可以构建MVC模式的前端项目，以及完整的模块化管理方案。还推出了一个基于ExtJS的sencha touch的移动端框架，不过在后来的版本中好像取消了，现在的ExtJS 5和6版本都可以直接用做移动端开发，也就是默认支持触屏的事件操作，但没深入了解过，后面再补充吧。

ExtJS简单实验

我喜欢ExtJS的一个重要原因就是它的API很方便查阅，大家可以自行去看一下。

官方API：http://docs.sencha.com/extjs/6.0.0/

ExtJS 使用感悟

ExtJS使用的是盒子模型（也叫做容器），最常用的容器有Panel和Container先来一段代码。

Ext.create('Ext.panel.Panel',{

  title: 'Hello',

  width: 200,

  html: 'World!',

  renderTo: Ext.getBody()

});

ExtJS 使用感悟

这样便生成了一个容器，同时可以在里面增加子元素（items），如：button，combox或者其他容器。

Ext.create('Ext.panel.Panel',{

  title: 'Hello',

  width: 200,

  height: 300,

  items: [{

  xtype: 'button',

  text:'OK',

  handler: function(){

     alert('I\'m a Button');

  }},{

  xtype: 'panel',

  html: 'I\'m a child Panel'

}],

enderTo: Ext.getBody()

});

ExtJS 使用感悟

这个是使用另一套皮肤crisp有Touch模式，也就是兼容了，触屏操作。

也可自定义组件来继承ExtJS的组件并扩展它，如：我们现在要做一个字体样式固定且带一个确定和取消按钮的容器。

Ext.define('MyPanel',{

extend: 'Ext.panel.Panel',//该行继承自Panel，即继承Panel的所有属性和法

width: 200,

height: 200,

margin: '20',

bbar: [

{ xtype: 'button', text: '确定' },

{ xtype: 'button', text: '取消' }

],

bodyStyle: {

color: 'red'

},

html: 'I\'m a Panel'

});

new MyPanel({

renderTo: Ext.getBody()

});

ExtJS 使用感悟

这个Ext.define其实是ExtJS中定义类的方法，写法可能不一样，但几乎完全模拟了面向对象的设计模式。如：

Ext.define('My.awesome.Class',{

someProperty:'something',

someMethod:function(s){

alert(s+this.someProperty);

}

...

});

varobj=newMy.awesome.Class();

obj.someMethod('Say ');

ExtJS在某种程度上是提供了富客户端项目结构乱的解决方案，若是有人非要提ReactJS AngularJS等等，如果非要用ExtJS来做门户网站，ReactJS AngularJS之类用来做富客户端。这就好比用菜刀去砍柴，用斧子去切菜一样，虽然不是非不可以，但其中有数不其尽的坑。

ExtJS和Sencha Cmd---前端的MVC设计模式

ExtJS在4版本的时候同时发布了Sencha Cmd这个工具，Sencha Cmd是针对ExtJS设计的项目构建工具，通过命令可以构建MVC模式的项目还是比较方便的，我们以ExtJS5.0为例演示一下。

安装过程有兴趣的自行查阅一下手册，在官方文档里都有，或者其他博客写的都很详细，我就不再累赘了。

项目结构

通过sencha generate app MyApp D:\MyApp这句命令生成项目MyApp

ExtJS 使用感悟

编码目录再app中，可以看到main文件夹中有三个文件分别是

Main.js----视图view

MainController.js----控制器Controller

MainModel.js---- ViewModel

同时也可以在sass目录写*.sass样式，这些会通过sencha app build打包完成

其实在长期的实践中我发现它的MVC模式并不是需要严格的遵守，也可以混着来，不过根据个人习惯我还是喜欢分清一些好。项目生成好后通过sencha app build编译项目，\MyApp\build\temp\production可以看到编译好的项目，之后就可以通过浏览器来查看。这里要说明一下sencha产生的项目必须要一个服务才能打开，我们可以把项目放到一个服务中查看，可以用sencha cmd自带的服务工具。通过sencha web start开启。之后访问http://localhost:1841/即可。这个端口也是可以配置的。

ExtJS 使用感悟 ExtJS 使用感悟

Main.js

Ext.define('MyApp.view.main.Main', {

extend: 'Ext.container.Container',

requires: [ //引入需要的模块

'MyApp.view.main.MainController',

'MyApp.view.main.MainModel'

],

xtype: 'app-main', //自定义xtype名称，可以在其他模块中通过这个type调用这个模块

controller: 'main', //注入main controller

viewModel: {

type: 'main' //注入main viewModel

},

layout: {

type: 'border'

},

items: [{

xtype: 'panel',

bind: {

title: '{name}'

},

region: 'west',

html: 'This area is commonly used for navigation,for example, using a "tree" component.',

width: 250,

split: true,

tbar: [{

text: 'Button',

handler: 'onClickButton'//事件注册会在controller中映射

}]

},{

region: 'center',

xtype: 'tabpanel',

items:[{

title: 'Tab 1',

html: 'Content appropriate for the currentnavigation.'

}]

}]

});

MainController.js

Ext.define('MyApp.view.main.MainController',{

extend: 'Ext.app.ViewController',

requires: [

'Ext.window.MessageBox'

],

alias: 'controller.main', //声明别名叫main的controller

onClickButton: function () {

Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);

},

onConfirm: function (choice) {

if (choice === 'yes') {}}

});

MainModel.js

Ext.define('MyApp.view.main.MainModel', {

extend: 'Ext.app.ViewModel',

alias: 'viewmodel.main', //声明叫main的viewmodel

data: {

name: 'MyApp'

}

//TODO - add data, formulas and/or methods to support your view

});

当前是初始化的一个界面，可以根据需求自行更改。至此就简单说了一下ExtJS和Sencha Cmd，后面若是有需要详细教程的，我会再整理一份。

关于Sencha Cmd我也是在工作的时候一点点上手的，虽然鄙人才疏学浅但接受新事务比较快，且自己喜好钻研，就多看了一些，有些自己的看法且与大家说道说道。

首先实际是用过的朋友就会知道在build完成后把所有的文件集中的一个文件里面去（app.js），有时候会达到好几兆，我见过最大的有12M，加载这这个js会很慢，这似乎是ExtJS设计的不合理之处，但其实不然，不知道大家注意到没有，sencha构建项目和编译项目的命令有没有什么特别之处，

sencha generate app MyApp D:\MyApp

sencha app build

它都是以app开始的，也就是sencha是在创建应用而不是web项目，这点我觉得很多人都没注意过，针对这些我特地翻墙出去查了一些资料，没找到实际的例子，估计都是内部系统，不让人看，倒是在有些论坛的个别回答里有只言片语的描述，他们都是用来做exe应用的，加载的都是本地资源也就不存在资源加载缓慢的问题了。而我们的web应用则无法避免资源加载时延过长这个问题，针对这点我特地做个一个模型，且叫它《ExtJS非阻塞加载设计模式》，后面我会做个专题详细说明。

时间仓促不成文章，望众位指正。