ExtJS4的HelloWorld

最新推荐文章于 2017-03-23 10:06:01 发布

原创最新推荐文章于 2017-03-23 10:06:01 发布 · 114 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ExtJS4 HelloWorld

ExtJS4 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用ExtJS4创建一个简单的Web应用程序。通过HTML和JavaScript的分离，实现了一个欢迎页面的展示。该示例涵盖了必要的文件结构及代码配置。

本文摘自ExtJS4官方文档

1.新建index.html

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

其中

<script type="text/javascript" src="extjs/ext-all.js"></script>

在官方文档里漏掉了，要补上，app.js如下：

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

上面的程序实现了html和js的分离，执行index.html,效果如图：