Extjs4.2入门(1)

来源：互联网发布：程序员的工作内容编辑：程序博客网时间：2024/06/01 09:20

Extjs是一款重量级的javascript框架，与jQuery不同的是，Extjs是一套完整的框架，可以完全用Extjs构建一个网站，而jQuery却比较零散，使用更为灵活。

（1）获取ExtJS

我们可以从Sencha的官网获取到ExtJS。当然，由于ExtJS并不是免费的，所以我们只能下载GPL版本的

（2）了解ExtJS

下载得到的压缩包解压后我们会得到ExtJS许多文件，其中有个index.html文件，打开后，我们可以看到以下界面

通过这个目录，我们可以点击API Docs查看API文档，View the Examples查看ExtJS所给出的一些案例（源代码在examples目录下），ExtJS给出的学习指南，这些都是很有用的.

而目录下的resources文件夹以及ext-all.js文件是主要的。ext-debug.js与ext-all.js不同的是，ext-debug.js是没有经过压缩不完整的，ext-all.js包含了所有的组件但是确实压缩过的（），若使用

ext-debug.js时没有在头部引入所需要的库文件（就像C++的include）时，就会导致出错。

（3）安装Firebug

firebug是一款js调试利器，可以在Firefox上按F12显示出调试信息，如果出错并告诉你错误在代码的第几行。

如果使用的是Chrome浏览器，则需要安装的一个插件叫FireLite（其实和Firebug是同一个东西）

（4）编辑器的选择

写ExtJS，其实用Eclipse比较好，只需安装一个叫Skpet的东西就好了，而且是免费的。如果使用Jetbrains系列的工具，只需要在插件中搜索Sencha，并进行下载就可以了（好像是30天试用期），sublime也是一个不错的选择

（5）新建第一个Ext项目

在解压的ExtJS文件目录下，新建一个html,编辑其中的文字

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript" src="ext-all.js"></script><!-- 加载ExtJS组件 --><script>Ext.application({name:'HelloWorldText',launch:function(){Ext.create('Ext.container.Viewport',{layout:'fit',items:[{html:'Hello ExtJS!'}]});}});</script><!-- ExtJS函数 --></head><body></body></html>

双击运行文件，若出现“Hello ExtJS”,则表示创建项目成功，你已经步入了ExtJS的大门了

0 0