ExtJS (1)

其实学这个ExtJS主要是它的功能的强大，还有一些大型公司的常用开发前端框架，其次呢是为了整一套新的前端框架出来，所以用了ExtJS

这是网上看到的一个ExtJS 桌面的一个案例截图

但是要想灵活运用Extjs，还是的慢慢来~估计有基础的同胞们都会了，初学者，如有错误的地方大神请指教~O(∩_∩)O谢谢！

文件/文件夹名的作用：

    build：文件夹下有一个sdk.jsb3文件，这个文件用于eclipse中spket插件，可以实现ExtJs的代码提示功能；

    builds：压缩后的ExtJS代码，体积更小，更快；
    docs：开发文档；
    examples：官方演示示例；
    locale：多国语言资源文件；
    pkgs：ExtJS各部分功能的打包文件；
    resource：ExtJS所需要的CSS与图片文件；
    src：未压缩的源代码目录；
    bootstarp.js：ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js；
    ext-all.js：ExtJS核心库,需要引用；
    ext-all-debug.js：ExtJS核心库的调试版,调试时使用。

注：EXTJS文件的区别：

    ext-all.js：包含所有的EXTJS框架文件，已经混淆
    ext-all-debug.js：包含所有的EXTJS框架文件，没有混淆
    ext-all-dev.js：包含所有的EXTJS框架文件，没有混淆，且包含调试信息
    ext.js：仅包含能让EXTJS运行的最小集合，已经混淆
    ext-debug.js：仅包含能让EXTJS运行的最小集合，没有混淆
    ext-dev.js：仅包含能让EXTJS运行的最小集合，没有混淆，且包含调试信息
    bootstrap.js：自动加载ext-all.js或者ext-all-debug.js，在以下情况下会加载ext-all-debug.js

        1.当前主机名是本地
        2.当前主机是使用IPV4地址
        3.Current protocol is a file
        4.其他情况下自动加载ext-all.js

其次呢我们要知道：

1、知道ExtJs是干嘛的

2、有面向对象的知识

3、具有一定的Javascript知识

4、熟悉JSON

5、不是拿来主义者，遇到问题先百度的

本教程不仅能教会你ExtJs的使用，而且还要教会大家怎么查文档（这个才是最重要的），跟着我让你们一步一步成为ExtJs大神（其实我是在夸自己，呵呵），如果大家在学习的时候遇到了问题可以留言，如果有时间一定回复。

首先看使用ExtJs5.0所必须的文件，解压后打开build目录，如下所示，红色框内的为必须的文件，其中ext-all.js为主文件，packages中为主题文件

1 <link rel="stylesheet" type="text/css" href="extjs5.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">  
2 <script type="text/javascript" src="extjs5.0/ext-all.js"></script>  
3 <script type="text/javascript" src="extjs5.0/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
4 <script type="text/javascript" src="extjs5.0/examples/shared/include-ext.js"></script>

这个js会自动加载上面的三个文件，效果等同于上面的引用，需要注意文件顺序ext-all.js必须在所有js前面

下面是packages内的文件夹

ext-local 是语言包，其中有中文支持

其他带有theme的都是主题，主题一般需要引入一个样式文件和一个js文件，与上面的类似如：ext-theme-crisp-all.css和ext-theme-crisp.js

js在build下，样式在build/resource下，所有主题包结构类似。

完成上面的操作之后就可以使用ExtJs了，下面写一个弹出框的效果

1 <script type="text/javascript">
2         //在页面加载完成之后执行  
3         Ext.onReady(function(){  
4             Ext.MessageBox.alert(‘系统提示‘,‘ExtJS 5.0 测试案例!‘);  
5         }); 
6 </script>

最终效果

ExtJS 5.0版本下载：点击下载ExtJS5.0