Question

调查ExtJS 4，我试图在这里做“Hello World”教程：http://www.sencha.com/learn/getting-started-with-ext-js-4/

我按照教程中的建议设置了所有文件：

enter image description here

但是，由于启动文件的时髦语法，我一直收到错误：

enter image description here

我没有使用JQuery或任何其他库 - 因为Sencha应该是一个完整的JavaScript环境。

以下是完整的代码：

app.js

<a href="#!/api/Ext-method-application" rel="Ext-method-application" class="docClass">Ext.application</a>({
    name: 'HelloExt',
    launch: function() {
        <a href="#!/api/Ext-method-create" rel="Ext-method-create" class="docClass">Ext.create</a>('<a href="#!/api/Ext.container.Viewport" rel="Ext.container.Viewport" class="docClass">Ext.container.Viewport</a>', {
            layout: 'fit',
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

的index.html

<!doctype 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="app.js"></script>
</head>
<body></body>
</html>

关于什么可能是罪魁祸首的任何想法？

Answer 1

您不应该在JS文件中包含任何HTML。教程中的代码搞砸了。那些锚点href标签是ExtJS API文档的链接，它以某种方式被插入到示例代码中。

实际代码应为：

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

我在这里提出了关于该页面的错误报告：http://www.sencha.com/forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098

2012年1月21日添加：显然该教程的正确版本位于：http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

Answer 2

您需要更新“app.js”（删除html标签）：

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

Javascript解析器无法理解您在创建“app.js”文件时碰巧复制的html标记。

Answer 3

这是在没有MVC的情况下运行ExtJS 4的最小HTML页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link href="/ext/4.0.0/resources/css/ext-all.css" rel="stylesheet" />
        <script src="/ext/4.0.0/ext-all.js"></script>
    </head>
    <body>
        <script>
            Ext.onReady(function() {
                Ext.Msg.alert('Welcome', 'Hello, World!');
            });
        </script>
    </body>
</html>

这个是MVC：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <link  href="/ext/4.0.7/resources/css/ext-all.css" rel="stylesheet" />
        <script src="/ext/4.0.7/ext-all.js"></script>
        <script src="/app.js"></script>
    </head>
    <body></body>
</html>

app.js的代码：

Ext.application({
    name: 'HelloWorld',
    launch: function () {
        Ext.Msg.alert('Welcome', 'Hello, World!');
    }
});

我的在线演示中的更多详情：

ExtJS 4 "Hello World" Application

ExtJS 4 "Hello World" Application Using Ext Loader

ExtJS 4 MVC "Hello World" Application

Sencha ExtJS 4 - 基本的hello world演示问题

3 个答案: