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的大门了