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中点击相应的浏览器进行访问
如图所示,弹出一个提示框