北大青鸟教育 主页 > 北大青鸟热门技术 > python技术 > 正文

ExtJS 4 入门

2012-07-20 14:54 点击咨询

ExtJS 4 入门


这次我们来介绍一下ExtJS 4 :

1. 需求
1.1 浏览器
ExtJS 4支持所有主流浏览器,这个就不用说了
如果需要调试,推荐使用一下的浏览器

Chrome
Safari
Firefox
以上都请用最新版吧

1.2 服务器
作为Web开发工程师,如果你不会弄个server说明你不合格,所以还是搭建个本地Apache吧,就不多说了

1.3 ExtJS 4 SDK
去官网下载最新版的压缩包,解压缩到你的web服务器根目录(作为web开发工程师你自己应该找到这个目录),如果解压出来的目录不是extjs,你可以重命名为extjs,然后访问http://localhost/extjs/index.html看到欢迎页面就对了

2. 程序架构
2.1 目录结构
推荐下面这种目录结构(非强制,如果你足够懂和自信)

- appname
    - app
        - namespace
            - Class1.js
            - Class2.js
            - ...
    - extjs
    - resources
        - css
        - images
        - ...
    - app.js
    - index.html
appname 包含所有程序代码,是根目录
app 包含所有类,按包的规则命名子目录
extjs ExtJS 4 SDK
resources CSS 图片等 资源文件
index.html 入口文件
app.js 程序入口
暂时先不用把这些目录都记住,先通过最简单的方式做一个hello world程序,创建一个“Hello Ext”程序,在web服务器根目录下创建一个目录helloext,并创建两个文件:

- helloext
    - app.js
    - index.html
然后把ExtJS SDK 解压到helloext目录并重命名为extjs,然后在index.html中输入以下内容

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
extjs/resources/css/ext-all.css 包含了所有样式
extjs/ext-debug.js 包含了最基础的一些类,ExtJS 4 Core核心部分
app.js 包含程序逻辑
在app.js中输入以下内容

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});
完成了以上工作,打开浏览器访问http://localhost/helloext/index.html会看到一个Panel,Panel的title是”Hello Ext”

2.2 动态加载
打开浏览器的控制台,刷新以下页面,会看到如下的信息

 

ExtJS 4 实现了动态按须加载,上面的例子里,Ext.create创建了一个Ext.container.Viewport的实例,Ext.create调用时,loader会首先检查Ext.container.Viewport类是否已经定义。如果没有定义,loader会自动加载对应文件。上面的例子里面Viewport.js最后成功加载了,但是还是有个warning,因为调用Ext.create时再加载,会卡住程序一小会儿直到对应文件加载完毕,如果加载的多,卡顿可能比较明显。可以用require的方式保证最基础的依赖加载完毕再运行app。

在Ext.application 语句前加上:

Ext.require('Ext.container.Viewport');
这样可以保证app运行前加载完Viewport,就不会出现warning

2.3 引入库的方法
解压开ExtJS 4 SDK之后可以得到下面这几个库文件:

ext-debug.js 这个文件只在开发时使用,它只提供最核心的类让程序可以运行,任何附加的类都通过动态加载引入(会造成n多请求,所以发布应用的时候不要用这个)
ext.js 这个文件功能和ext-debug.js一致,但是是用于对外发布的,它和app-all.js一起使用(见第三节)
ext-all-debug.js 这个文件包含ExtJS全部内容,全部class,它可以像ExtJS 3那样使用,可以减少学习成本,官方还是推荐ext-debug.js这种引入了新机制的方式
ext-all.js 这是ext-all-debug.js的压缩版本,内容跟其一致,可用于发布,但是它包含所有内容,官方不推荐,具体可参见第三节按须打包的方法
3. 发布
新引入的Sencha SDK Tools(点此下载)让ExtJS 4的发布更容易(这是官方说法,我不这么认为),这个工具可以根据依赖进行打包,具体操作如下

安装好SDK Tools之后,打开命令行终端,切换到应用跟目录

cd path/to/web/root/helloext
在这里执行一个简单的命令,可以生成一个jsb3文件,这文件有描述依赖的作用

sencha create jsb -a index.html -p app.jsb3
如果有服务器端脚本,可以用下面这个命令,命令中的URL是实际的URL,比如你用php,可能就是index.php而不是index.html

sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
这个命令搜索index.html中真正使用的依赖

生成jsb3文件之后是可以对其修改的,比如自定义一些依赖,但是大多数情况可以直接继续下面的命令

sencha build -p app.jsb3 -d .
这条命令根据jsb3文件,生成两个文件:

all-classes.js 这个文件包含app自定义的所有类,这个文件没有压缩可以方便调试,在我们的例子这个文件是空的,因为Hello Ext应用没有任何自定义class
app-all.js 这个文件是压缩过的,包含所有app代码和依赖的类,相当于一个可以用于发布的 all-classes.js + app.js
ExtJS应用是需要一个index.html的,你可根据自己的服务器端脚本去做这个入口,不一定一定要是index.html,例子中我们创建一个用于发布的index-prod.html:

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext.js"></script>
    <script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
注意这里的ext-debug.js被替换为ext.js,app.js替换为app-all.js,访问http://localhost/helloext/index-prod.html 会看到发布版本的Hello Ext应用,可以打开浏览器控制台看看和debug版本的区别

试听课
徐州市中博教育培训中心    版权所有    苏ICP备13053530号
地址:徐州市解放南路181号北大青鸟徐州中博(六中对面)        矿大校区地址:徐州市解放南路中国矿业大学(文昌校区西校区)
电话:0516-85628888        邮编:221000

苏公网安备 32030302000208号