最近纷杂的事情比较多了，奔波ing！所以，Node.js 和Canvas动画系列都停止了，等稳定了再重拾书本继续学习！因为某种原因最近在看ExtJS，分享下学习的心得，希望对同道中人有所帮助。

第一用ExtJS的时候还是比较震撼的，这个颜色这些控件经常看到有没有？！先前用过Drupal，觉得二者有某种相似性，Container，Panel，Layout某些概念上，只不过Drupal是操作，ExtJS是代码。ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
　　ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。 ExtJS，是开发RIA的利器，功能强大，非常简单的代码呈现的效果却复杂。对jQuery很熟，拿熟悉的东西来类比新的，容易上手。如果你跟我一样的想法，不妨跟着我的思路来认识认识。

一、如何配置ExtJS环境？

可以去官网看Getting Started

翻译版本的ExtJS入门-http://extjs.io/blog/2012/06/19/extjs-4-getting-started/

配置开发ExtJS环境-http://www.cnblogs.com/youring2/archive/2013/01/25/2876439.html

认识Extjs的开发包-http://tesia.iteye.com/blog/1894725

解压后的文件目录中的主要资源进行简单的介绍:

1. builds 目录是ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。 
2. docs 中是ExtJS的文档,其中最重要的是ExtJS的API。可以说是开发过程中的法宝。 
3. examples 是官方的演示示例，使初学者快速掌握ExtJS开发。 
4. locale 是多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。 
5.overview 是ExtJS的功能简述，其中从整体上阐述了它的功能和结构。 
6.pkgs中是ExtJS各部分功能的打包文件。 
7.resource 中ExtJS要用到的图片文件与样式表文件，ExtJS引以为傲的漂亮外观就由这个目录的文件所控制。 
8.src 目录是未压缩的源代码目录。 
9. bootstrap.js是ExtJS库的引导文件，通过参数可以自动切换ext-all.js和ext-all-debug.js。 
10.ext-all.js 是ExtJS的核心库，必须要引入的。 
11.ext-all-debug.js 是ext-all.js的调试版，在调试时需要用到的。

二、如何看API

相对于jQuery每个属性和函数的面面俱到，ExtJS相对要节省点，需要花点时间测试下某某方法是不是就是这样用的呀之类~~

官网在线API 然后选择相应的版本

看懂ExtJS的API-http://www.cnblogs.com/youring2/archive/2013/03/05/2944004.html

脚本娃娃翻译的Ext 4.1.0 API- http://extjs-doc-cn.github.io/ext4api/

或者是把刚才配置环境中下载的ExtJS文件放置到localhost中，直接访问http://localhost/ext-4.2.1-gpl/index.html

点击API Doc,本地查看文档。

三、让我们来看个小例子吧

我用的工具是Sublime Text2，截图FastStone Caputer--[测量距离的利器]

层级结构：

index.html

<!DOCTYPE html>

<html>

<head>

    <title>just a test</title>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" >

    <script type="text/javascript" src="extjs/ext-all-debug.js" ></script>

    <script type="text/javascript" src="app.js"></script>

</head>

<body>

<div id="myDiv" class="test">This is a test div.</div>

</body>

</html>

app.js

Ext.onReady(function() {

    var myDiv = Ext.get('myDiv');

    myDiv.highlight();

});

效果就是myDiv高亮了一下！

Ext.onReady,是当需要的类和DOM都加载完毕开始执行函数。是否类似jQuery的$(function(){});

Ext.get('myDiv')类似$('#myDIv')或者document.getElementById?这样你是否熟悉了呢？

这是调用Loader对象的onReady方法，在Loader.js中可找到如下定义：

如何找到这个文件本地方法：ext-4.2.1-gpl\src\class

在线API搜索onReady，定位到Ext.Loader点击右边的Files.js

 onReady: function(fn, scope, withDomReady, options) {

            var oldFn;

            if (withDomReady !== false && Ext.onDocumentReady) {

                oldFn = fn;

                fn = function() {

                    Ext.onDocumentReady(oldFn, scope, options);

                };

            }

            fn.call(scope);

}

重点是最后一句,call(scope)!

比如

var tempFunction={

  scopeTest:function(){

   Ext.Msg.alert('Scope','Just a test!');

  }

};

Ext.onReady(function() {

    var myDiv = Ext.get('myDiv');

    myDiv.highlight();

    this.scopeTest();

},tempFunction);

这个时候是会弹出消息框，标题Scope,内容Just a test！

如果说是用jQuery模拟弹出框，那是不是要用层，定位，之类的或者你引用个插件，但是Ext仅仅是一句话，神奇否？

补充一下，Loader.js 提示，可以在onReady之前加上

Ext.require('Ext.window.Window');
Ext.require('Ext.layout.container.Border');

这样就可以提前引用相关的类了，加载速度会快点哦！

怎么样？感觉是不是熟悉了点？

PS：参考文献，已经穿插在文中！非常感谢这些作者！

ExtJS学习之路第一步：对比jQuery,认识ExtJS的更多相关文章

  1. [EntLib]微软企业库5.0 学习之路——第一步、基本入门

    话说在大学的时候帮老师做项目的时候就已经接触过企业库了但是当初一直没明白为什么要用这个,只觉得好麻烦啊,竟然有那么多的乱七八糟的配置(原来我不知道有配置工具可以进行配置,请原谅我的小白). 直到去年在 ...

  2. C#开发学习人工智能的第一步

    前言 作为一个软件开发者,我们除了要学会复制,黏贴,还要学会调用API和优秀的开源类库. 也许,有人说C#做不了人工智能,如果你相信了,那只能说明你的思想还是狭隘的. 做不了人工智能的不是C#这种语言 ...

  3. （大数据工程师学习路径）第一步 Linux 基础入门----文件系统操作与磁盘管理

    介绍 本节的文件系统操作的内容十分简单,只会包含几个命令的几个参数的讲解,但掌握这些也将对你在学习后续其他内容的过程中有极大帮助. 因为本课程的定位为入门基础,尽快上手,故没有打算涉及太多理论内容,前 ...

  4. 学习Nodejs的第一步

    最近看了几本关于Node.js的书,本来个人技术分享网站http://yuanbo88.com/是打算用Node.js作为服务器端语言来处理后台的,后来又改成了PHP(也是自己研究,毕竟网上DEMO多 ...

  5. Vue学习之路第一篇（学习准备）

    1.开发工具的选择 这个和个人的开发习惯有关,并不做强求,厉害的话用记事本也可以.但是我还是建议用人气比较高的编辑工具,毕竟功能比较全面,开发起来效率比较高. 我之前写前端一直用的是sublimete ...

  6. ExtJS学习之路第六步：深入讨论组件Panel用法

    Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...

  7. ExtJS学习之路第五步：认识最常见组件Panel

    文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...

  8. ExtJS学习之路第八步：Window组件

    一个专门Panel用作程序窗口.默认的,Window可以是浮动的(floated).可缩放(resizable)以及可拖动的(draggable).Window能够被最大化适应可视窗口,(restor ...

  9. ExtJS学习之路第四步：看源码，实战MessageBox

    可以通过看MessageBox.js的源码来深入认识,记住它的主要用法.Ext.MessageBox是实用类,用于生成不同风格的消息框,它是Singleton(单例),别名Ext.Msg.注意Mess ...

随机推荐

  1. iOS——数据安全性问题小结

    在移动互联网快速发展的今天,iOS应用直接运行在用户的手机上,与运行在服务器后台服务相比,更有可能被黑客攻击. a.网络安全: 1.1 安全地传输用户密码 事先生成一对用于加密的公私钥,客户端登录的时 ...

  2. bluebird

    nodejs-使用request和bluebird编写的http请求模块   http://blog.csdn.net/o6875461/article/details/44594545

  3. 【Moqui业务逻辑翻译系列】Shipment Receiver Receives Shipment with Packing Slip but no PO

    Shipment Receiver receives shipment. It has invoice tucked into it. Receiver records vendor name, ve ...

  4. 每天一个linux命令（45）：route命令

    Linux系统的route 命令用于显示和操作IP路由表(show / manipulate the IP routing table).要实现两个不同的子网之间的通信,需 要一台连接两个网络的路由器 ...

  5. ssh开发流程

  6. jstl标签用法

     bean的uri的路径 bean标签是属于struts中的标签,使用要在 Struts 1.3 Libraries中 struts-taglib-1.3.8.jar 中META-INFtld ...

  7. java.lang.NoClassDefFoundError: com/sun/mail/util/BEncoderStream

    :java.lang.NoClassDefFoundError: com/sun/mail/util/BEncoderStream 这个问题是Mail.jar包没有引入到java路径中,或者是版本的问 ...

  8. Spring-事物的隔离级别

    Spring中定义了5中不同的事务隔离级别: 1. ISOLATION_DEFAULT(一般情况下使用这种配置既可) ; 这是一个PlatfromTransactionManager默认的隔离级别,使 ...

  9. Struts tag -s

    1,if/elseif/else标签 <s:set value="19"/> <s:if test="%{#age > 60}"> ...

  10. js常用插件

    1.jQuery Shortcuts 是个超轻量级的方法,使用 jQuery 来绑定快捷键(热键). 2.Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率. 3.Kn ...