最近纷杂的事情比较多了，奔波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. Cocopod上更新上传自己的开源框架供别人下载

    为了更方便的集成第三方框架有了cocopods 的, 当我们有了相对比较好的框架的时候如何更新到cocopods 供他人参考呢? 下面我一步一步带大家开源自己的框架. 第一步 把自己的框架更新到git ...

  2. Oracle备份数据库

    1.前言 工作中数据库备份是一个很重要的事情,难免有时候一个不小心就会误操作,造成无法挽回的措施.在昨天的工作中,我们的一个产品经理在操作定制端的时候一个误操作,清空了几张表的数据同时还删除了几张系统 ...

  3. IDEA SSH

    被IDEA各种虐0.0各种配置,没有人教就百度,别人也弄了点,然后整整花了一天,从eclipse转到IDEA真的不容易啊TT

  4. Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目

    本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...

  5. [vijos1892]树上的最大匹配（树形DP）

    题目:https://vijos.org/p/1892 分析:(100分其实用到各种c++优化,没什么实际意义,所以弄70就可以了) 题目很简单,很容易想出用树形DP,但是求方案数的时候,满满都是细节 ...

  6. iOS开发中的错误整理，通过storyboard做项目，遇到view看不见，或者view被压缩的情况

    前言:在网易新闻的练习中遇到了这个错误 注意:练习中遇到了如图的bug,主要是因为用storyboard布局 600 * 600   显示的时候要经过自动布局,缩小到相应手机的屏幕大小.也就是有的尺寸 ...

  7. Google-解决在调试页面或者js时总是提示烦恼的断点问题

    按F12键,然后切换到Source标签,看底下的那个跟暂停一样的图标是不是变成蓝色或紫色了? 如果是蓝色或者紫色,则把他切换到“灰色”状态(点击图标就会切换成不同的状态.或者可能是其他颜色状态),如下 ...

  8. 在VS2012中编译WinXP兼容的程序

    VS2012默认是不兼容Windows XP的,编译链接出来的程序只能在Windows Vista及以上版本的操作系统上运行.可是有时需要在Windows XP上运行,又不得不用VS2012(例如用了 ...

  9. iOS开发icon&images Size

    https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix ...

  10. PowerDesigner导出的sql中去掉双引号，主要用于Oracle

    如题,这些双引号对于Oracle建表实在是糟糕透了: 解决方法: (转载,作者的百度已经挂了,无法放上链接,自私一把,以前的Oracle项目不见了,无法展示) 1.去掉Oracle生成的SQL创建语句 ...