Ext JS 5 （一）准备篇

来源：互联网发布：手机淘宝论坛编辑：程序博客网时间：2024/05/16 04:45

因为工作原因，接触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我们暂时都用不上，了解一下就可以。

0 0