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