虽然Extjs5.1 beta版已经出来了,但是我们这里还是使用5.0版本,因为用5.1建立的项目,会有”beta”水印,非常不爽。
废话不多说,开始简单暴力的窥视Extjs5.0的真容。
随便在硬盘上找一个地方,建立文件夹,这里命名为”test”吧。打开test文件夹,新建index.html文件(怎么建,不用我说吧),输入以下代码:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Ext JS!</title>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/ext-all.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext/trial/5.0.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
<script type ="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
继续在test文件夹里面新建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文件,耐心等待一下,会看到我们的hello word程序已经运行起来了。
但是我们也发现右边有讨厌的“Ext JS Trial”水印。所以这种做法只适合想尽快一睹extjs5风采时使用,真正开发时,我们还是得按部就班的搭建项目。下一篇我们讲如何手动搭建Extjs5项目。