ExtJs5.0 入门编写第一个网页Hello World

最新推荐文章于 2021-06-30 13:08:30 发布

tingyuanss

最新推荐文章于 2021-06-30 13:08:30 发布

阅读量3.3k

点赞数 1

分类专栏： ExtJs

本文链接：https://blog.csdn.net/tingyuanss/article/details/44956891

版权

ExtJs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

此文章借鉴官网官方文档http://docs.sencha.com/extjs/5.0/getting_started/welcome_to_extjs.html。

首先下载extjs5.0，下载地址http://cdn.sencha.io/ext/gpl/ext-5.0.0-gpl.zip ，然后解压。

首先你新建一个index.html,然后包含如下内容：

<!DOCTYPE html>
<html>
<head>
<title>Welcome to Ext JS!</title>
<link rel="stylesheet" type="text/css" href="/home/steven/ExtJsDemo/ext-5.0.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script type="text/javascript" src="/home/steven/ExtJsDemo/ext-5.0.0/build/ext-all.js"></script>
<script type="text/javascript" src="/home/steven/ExtJsDemo/ext-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>

其中将上面所有的/home/steven/ExtJsDemo/ext-5.0.0换成你的ext5.0安装目录，因为我的是/home/steven/ExtJsDemo/ext-5.0.0

然后在和index.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,就会看到ExtJs的效果。