其实学这个ExtJS主要是它的功能的强大,还有一些大型公司的常用开发前端框架,其次呢是为了整一套新的前端框架出来,所以用了ExtJS
这是网上看到的一个ExtJS 桌面的一个案例截图
但是要想灵活运用Extjs,还是的慢慢来~估计有基础的同胞们都会了,初学者,如有错误的地方大神请指教~O(∩_∩)O谢谢!
文件/文件夹名的作用:
build:文件夹下有一个sdk.jsb3文件,这个文件用于eclipse中spket插件,可以实现ExtJs的代码提示功能;
builds:压缩后的ExtJS代码,体积更小,更快;
docs:开发文档;
examples:官方演示示例;
locale:多国语言资源文件;
pkgs:ExtJS各部分功能的打包文件;
resource:ExtJS所需要的CSS与图片文件;
src:未压缩的源代码目录;
bootstarp.js:ExtJS库引导文件,可通过参数自动切换ext-all.js与ext-all-debug.js;
ext-all.js:ExtJS核心库,需要引用;
ext-all-debug.js:ExtJS核心库的调试版,调试时使用。
注:EXTJS文件的区别:
ext-all.js:包含所有的EXTJS框架文件,已经混淆
ext-all-debug.js:包含所有的EXTJS框架文件,没有混淆
ext-all-dev.js:包含所有的EXTJS框架文件,没有混淆,且包含调试信息
ext.js:仅包含能让EXTJS运行的最小集合,已经混淆
ext-debug.js:仅包含能让EXTJS运行的最小集合,没有混淆
ext-dev.js:仅包含能让EXTJS运行的最小集合,没有混淆,且包含调试信息
bootstrap.js:自动加载ext-all.js或者ext-all-debug.js,在以下情况下会加载ext-all-debug.js
1.当前主机名是本地
2.当前主机是使用IPV4地址
3.Current protocol is a file
4.其他情况下自动加载ext-all.js
其次呢我们要知道:
1、知道ExtJs是干嘛的
2、有面向对象的知识
3、具有一定的Javascript知识
4、熟悉JSON
5、不是拿来主义者,遇到问题先百度的
本教程不仅能教会你ExtJs的使用,而且还要教会大家怎么查文档(这个才是最重要的),跟着我让你们一步一步成为ExtJs大神(其实我是在夸自己,呵呵),如果大家在学习的时候遇到了问题可以留言,如果有时间一定回复。
首先看使用ExtJs5.0所必须的文件,解压后打开build目录,如下所示,红色框内的为必须的文件,其中ext-all.js为主文件,packages中为主题文件
1 <link rel="stylesheet" type="text/css" href="extjs5.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css"> 2 <script type="text/javascript" src="extjs5.0/ext-all.js"></script> 3 <script type="text/javascript" src="extjs5.0/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> 4 <script type="text/javascript" src="extjs5.0/examples/shared/include-ext.js"></script>
这个js会自动加载上面的三个文件,效果等同于上面的引用,需要注意文件顺序ext-all.js必须在所有js前面
下面是packages内的文件夹
ext-local 是语言包,其中有中文支持
其他带有theme的都是主题,主题一般需要引入一个样式文件和一个js文件,与上面的类似如:ext-theme-crisp-all.css和ext-theme-crisp.js
js在build下,样式在build/resource下,所有主题包结构类似。
完成上面的操作之后就可以使用ExtJs了,下面写一个弹出框的效果
1 <script type="text/javascript"> 2 //在页面加载完成之后执行 3 Ext.onReady(function(){ 4 Ext.MessageBox.alert(‘系统提示‘,‘ExtJS 5.0 测试案例!‘); 5 }); 6 </script>
最终效果
ExtJS 5.0版本下载:点击下载ExtJS5.0