ExtJS教程（1）初窥ExtJs

本教程用的版本是ExtJs5.0&＃xff0c;在后期会介绍一些ExtJs5.0的新特性。适用于初学者&＃xff0c;大婶请绕道

阅读本教程需要满足一下条件

1、知道ExtJs是干嘛的

2、有面向对象的知识

3、具有一定的Javascript知识

4、熟悉JSON

5、不是拿来主义者&＃xff0c;遇到问题先百度的

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

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

在head中添加上面的内容&＃xff0c;或者将examples中的share文件夹添加至项目&＃xff0c;然后引入下面的代码

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

下面是packages内的文件夹

ext-local 是语言包&＃xff0c;其中有中文支持

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

js在build下&＃xff0c;样式在build/resource下&＃xff0c;所有主题包结构类似。

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

//在页面加载完成之后执行
Ext.onReady(function(){Ext.MessageBox.alert(&＃39;hello&＃39;,&＃39;HELLO WORLD!&＃39;);
});最终效果