Ext JS 5 (一)准备篇

本文介绍了ExtJS 5的基本安装和配置流程,并通过一个简单的Hello World示例演示了如何创建一个基本的应用程序。此外,文章还概述了ExtJS的不同版本及其用途。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

因为工作原因,接触extjs 有两年多了。从3.X到4.X,如今6都已经出来了。无奈extjs从5开始抛弃了IE8以下的版本,在实际的项目中暂时还不能应用,但是并不能影响我学习它的热情。
而且不得不说的是虽然MVC从4.X就开始引入了,但是我们还是Ext.onReady()这样用。
这也算是为什么要在研究一遍Extjs5的原因。
因为目前extjs6还在公测,而且它把extjs和sencha touch融为一体。所以还是先搞明白extjs5吧。

下载

现在的最新版本是extjs5.1.0
官网的下载可能需要填写一些信息,它把适用版本下载地址发到你的邮箱,你可以试用30天。
官网试用下载地址
之前提到了MVC 模式,Sencha提供了一个Sencha Cmd 工具,这个可以帮你生成一个采用MVC模式架构好的工程。
下载的extjs解压就可以。Cmd的安装也很简单。
生成的方法也很简单,命令行模式,到你刚刚下载好的extjs目录内,
然后执行

sencha generate app -ext MyApp ./app

就是在./app的路径下生成一个叫MyApp的项目。

Hello World!

但是我们最好还是从头写起,而且并不是所有的项目都把view单独作为一个工程。
司空见惯Hello World!
建一个空目录 exthello
在exthello中创建一个build目录。找到下载的extjs里的ext-5.1.0\build\路径下的packages文件夹整个粘过来,以及这个路径下的ext-all.js,其他的我们暂时都不需要 。
在exthello下创建index.html 和app.js两个文件
最后目录结构如下:
这里写图片描述

在index.html中写下面的内容:

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Ext JS!</title>
        <link rel="stylesheet" type="text/css" href="/{SDKLocation}/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="/{SDKLocation}/build/ext-all.js"></script>
        <script type="text/javascript" src="/{SDKLocation}/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script type ="text/javascript" src="app.js"></script>
    </head>
    <body></body>
</html>

app.js中加入下面的代码:

Ext.application({
    name   : 'MyApp',

    launch : function() {

        Ext.create('Ext.Panel', {
            renderTo     : Ext.getBody(),
            width        : 200,
            height       : 150,
            bodyPadding  : 5,
            title        : 'Hello World',
            html         : 'Hello <b>World</b>...'
        });

    }
});

在浏览器中将index.html运行起来,你会成功的看到:
这里写图片描述
上面的例子里我们给页面加了一个Ext.Panel的组件,定义了长宽,标题和显示的内容。

刚才在ext-5.1.0\build\下,你一定也看到了除了ext-all.js的其它文件。

  • ext.js:缩小版。基础框架,动态加载扩展类。
  • ext-all.js:缩小版。包括整个框架。
  • ext-all-debug.js:完整版。包括整个框架,用来调试。
  • ext-debug.js:完整版。基础框架,动态加载扩展类,用来调试。
  • ext-all-rtl-debug.js:完整版。包括整个框架和支持RTL。
  • ext-all-rtl-sandbox-debug.js:完整版。包括整个框架和支持RTL。允许使用sandbox与外部其他版本
  • ext-all-rtl-sandbox.js:缩小版。包括整个框架和支持RTL。sandbox允许使用其他版本的ext。
  • ext-all-rtl.js:缩小版。包括整个框架和支持RTL。
  • ext-all-sandbox-debug.js:完整版。整个框架,sandbox允许使用其他版本的ext。
  • ext-all-sandbox.js:缩小版。整个框架,sandbox允许使用其他版本的ext。
    以上除了ext-all我们暂时都用不上,了解一下就可以。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值