Ext学习第一篇——HelloWorld

Ext.js 概述

        Ext JS是一个流行的JavaScript框架，它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器，

如IE6 +，FF，Chrome，safari 6+ 等。而sencha，sencha touch的另一个产品用于移动应用程序。

Ext JS基于MVC / MVVM架构。 最新版本的Ext JS 6是一个单一的平台，可以用于桌面和移动应用程序，而不需要为不同的平台提供不同的代码。

Ext下载：http://pan.baidu.com/s/1eSByUfK

使用WebStorm2017开发学习Ext

 在项目中引入Ext的必要文件 ，你可以全部把Ext文件导入到你的项目下，但是因为Ext对WebStorm来说还是挺大的，在全部导入的时候会很慢，有时候还会卡死

所以我们只需要导入我们需要的几个核心文件和资源文件就可以了

我们要把它下面的resources导入到项目中，因为我们要使用Ext的样式文件， resources就有各种Ext的样式文件

导入  ext-all.js、bootstrap.js、ext-all-debug.js、ext-lang-zh_CN.js（这个在Ext下面的local文件夹下面，为了能显示出中文），

（在开发工具中创建一个目录直接拖里面就行）

如图所示，我们需要的Ext的文件目录

 

接下来我们需要创建一个html和js文件

js文件中进行Ext开发，html文件引用需要的js文件和我们创建的js文件来进行浏览器显示查看

 

 接下来我们在test.html中引入js文件

 1.使用<link/>标签来引入Ext的样式文件，resources中有好多样式，可以试着挑选一个自己喜欢的样式

 2.使用<script/>标签引入js文件 ， ext-all.js   是我们需要的Ext的核心js文件

3  ext-lang-zh_CN.js   为了能显示出中文

4. text.js 是我们自己创建的js文件

注意：因为我们的test.js是在test目录下，Ext跟test是同一目录，所以在引入Ext的文件是我们使用   ../   先出test目录，然后再进去Ext目录去引用

这样我们在html文件中的配置就写完了，基本html就不动了，主要是在js中写代码

  onReady是Ext的入口函数

只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后，所要执行的函数。

调用onReady方法时可以带三个参数，

第一个参数是必须的，表示要执行的函数或匿名函数，

第二参数表示函数的作用域，

第三个参数表示函数执行的一些其它特性，比如延迟多少毫秒执行等，大多数情况下只需要第一个参数即可。

然后我们在html中点击相应的浏览器进行访问

如图所示，弹出一个提示框