前言:

  我之前是搞EasyUI+KO.js的,由于最近项目需要用到ExtJs。因此。边学边记录我的学习历程,希望能给自己和大家一点帮助。

1.0什么是ExtJs?

  首先,什么是ExtJs呢?ExtJs主要用来开发富客户端的AJAX应用,主要用于创建前端用户界面,与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一 款不可多得的JavaScript客户端技术的精品。

  简单来说,就是一个前端框架,跟后端语言是没关系的,后台只需要返回Json数据即可。

2.0ExtJs各个版本的区别?

  然后,说说ExtJs从3.X 版本到6.X版本的区别,前面那些旧版本就不说了,太过久远(由于本人一开始就用的5.X的MVVM模式,如果对之前版本的描述不当请见谅~!)

3.X--->4.0X   

1.从兼容性,4.X会提供一个兼容3.X的解决方案。

2.提供了别名alias,别名可以通过类别来分开,例如:widget.hello和feature.hello是不一样的。

3.包以及命名空间的修改。例如window组件,之前是Ext.Window,到4.X改成了Ext.window.Window(这样我可以更清晰看出它的层次结构,例如Ext.panel.Panel和Ext.form.Panel可以看出是有关联的)。

4.创建对象方式的改变。提供了Ext.define的方式来定义一个组件类,这种方式还可以自动加载JS文件(按需加载文件,例如users,requires(后面再详细说ExtJs的加载模式),再也不用一个个拖JS文件了)。

5.最直观的就是写法上的不同,3.X的创建组件的写法是var win = new Ext.Window({ }); 通过new关键字来创建,就跟写后台代码一样。到4.X推荐使用var win=Ext.create(”Ext.window.Window“)的方式来解决问题,当然如果你习惯使用New的方式也可以。

6.提供了前端的MVC模式,把控制器(Controller),视图(View),数据(Store)分离。更好的管理代码。 

。。。。剩下的再补充。大家也可以补充给我。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

4.X--->5.X    

1.提供MVVM模式。每个视图(View)对应一个控制器(Controller)以及一个ViewModel(视图模型)。不了解MVVM的童鞋自己搜索相关资料。在复杂界面的数据处理上灵活方便很多。

5.X--->6.X   。。。以后补充

以上说了各个版本的区别,大家可以根据需要来选择各自版本。本系列教程用的是ExtJs5.1.0-gpl版本。(包括全部源代码,例子等等)

3.0学习ExtJs的方法:

  1.0官方API:http://docs.sencha.com/extjs/5.1.0/

  2.0官方示例:

  3.0博客园,CSDN的一些好文。

  有以上两个已经够用了,推荐先看官方的例子吧。遇到有需要的在去查API的对象属性事件。以下两个推荐下载离线的文档以及API。部署到本地。(官方例子在下载的GPL包里面已经包含了,路径为:~\ext-5.1.0\build)

4.0ExtJs的目录介绍:

  

看到目录很多,其实我们需要用到的就几个文件,好了,先就写在这里吧,我们下节再介绍。

总结:

  这次就介绍了什么是ExtJs,以及ExtJs的版本区别,下一节我们正式进入到ExtJs的学习。

01什么是ExtJs?的更多相关文章

  1. ExtJS 4.2 教程-01:Hello ExtJS

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-1-hello-extjs, 本文还发布在了ExtJS教程网站起飞网上面,如果转载请保留本段声明,谢谢合作 ...

  2. ExtJS 教程目录

    今天我创建了一个小组,取名ExtJS互助团,欢迎朋友们加入!遇到问题需要帮助的时候别忘了ExtJS互助团!希望更多的园友加入进来,帮别人,也是帮自己!组内讨论不限于ExtJS,还包括FineUI.Ex ...

  3. ExtJS实战 01——HelloWorld

    前言 Extjs5的发布已经有些日子了,目前的最新稳定版本是Extjs5.1.0,我们可以在官方网站进行下载.不过笔者今天访问得到的是502Bad Gateway,原因可能是sencha的nigix没 ...

  4. Extjs MVC学习随笔01

    Extjs Mvc模式下的整个MVC框架体系即下图: 包含了Controller(实现方法层),Store(数据来源管理层),View(页面布局层).之所以用MVC我想是因为减轻针对某一页面的单一的J ...

  5. 01.Sencha ExtJS 6 - Generate Workspace and Application

    生成workspace         下载gpl版本的ExtJs6         在https://www.sencha.com/legal/GPL/页面的右侧申请链接来下载,或者使用链接http ...

  6. ExtJS入门教程01,Window如此简单,你怎能不会?

    这是一系列ExtJS教程,今天的是第一篇,主要介绍ExtJS中Window的基本用法.希望大家能够支持! 来吧,创建一个漂亮的弹出窗 var win = Ext.create("Ext.Wi ...

  7. 在项目中使用ExtJS

    主要目录文件介绍 builds:压缩后的ExtJS代码,体积更小,更快:docs:开发文档:examples:官方演示示例:locale:多国语言资源文件:pkgs:ExtJS各部分功能的打包文件:r ...

  8. [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例

    原文地址:http://www.stepday.com/topic/?459 作文一个ExtJs的入门汉子,学习起来的确是比较费劲的事情,不过如今在这样一个网络资源如此丰富的时代,依然不是那么难了的. ...

  9. 无废话ExtJs 入门教程十七[列表:GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

随机推荐

  1. HTML5学习总结-04 音频&视频播放

    一 音频播放 1 Audio(音频) HTML5提供了播放音频文件的标准 2 control(控制器) control属性攻添加播放,暂停和音量空间. 3 标签定义声音 <audio> 例 ...

  2. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

  3. 从Paxos到ZooKeeper-二、ZooKeeper和Paxos

    ZooKeeper为分布式应用提供了高效且可靠的分布式协调服务,提供了诸如tong'yi统一命名服务.配置管理和分布式锁等分布式的基础服务.在解决分布式数据一致性方面,ZooKeeper并没有直接采用 ...

  4. angular 兼容ie7 实现

    <script src="~/Content/js/angular.min.js"></script><script src="~/Cont ...

  5. 20145212 实验四《Andoid开发基础》

    20145212 实验四<Andoid开发基础> 实验内容 安装Android Studio 运行安卓AVD模拟器 使用Android运行出模拟手机并显示自己的学号 实验过程 一.安装An ...

  6. 数据库备份与恢复(Mysql)

    Mysql备份种类可以分为两种:完全备份和增量备份 完全备份:对某一个时间点上的所有数据或应用进行的一个完全复制. 增量备份:指在一次全备份上或上一次增量备份后,以后每次的备份只需备份与前次相比增加或 ...

  7. Cloudservice程序设置Idle timeout

    部署的云服务程序,默认的idle timeout是4分钟,意味着如果你通过一个workerrole发布了wcf服务,客户端第一次调用服务方法后,再过4分钟尝试去重新调用服务,会报错,具体测试如下: 1 ...

  8. 9-slice-scaling

    9-slice-scaling http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

  9. fixed的left:50%,漂浮

    .floor-box{width: 44px; border: 1px solid #ccc; position: %; z-index: } 漂浮距离,距中间50% .floor-box{width ...

  10. centos 7.0 编译安装mysql 5.6.22 再次总结 成功编译安装~ 越来越熟练了~

    查找php.ini文件所在位置 [root@localhost /]# find -name php.ini ./usr/etc/php/etc/php.ini mysql官网的安装说明http:// ...