Ext JS应用程序显示空白页面

时间:2011-12-22 16:50:52

标签: javascript extjs google-chrome-devtools

我是Ext JS的新手。我正在创建本教程中解释的第一个应用程序:http://www.sencha.com/learn/getting-started-with-ext-js-4并且如我所提到的,我创建了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="app.js"></script>
</head>
<body></body>
</html>

和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.'
            }
        ]
    });
}
});

但它显示了我的空白页面。如果我使用Chrome开发人员工具对其进行调试,则会显示以下错误:Uncaught SyntaxError:Unexpected token&lt;在app.js中:1

我努力了但不知道app.js出了什么问题

我确信我的框架已正确设置并正常工作,但加载后页面为空白。

谢谢。

2 个答案:

答案 0 :(得分:5)

使用真正的Javascript而不是错误地复制/粘贴html包装的javascript文本,你可能会有更好的运气:

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

答案 1 :(得分:1)

我发现这是一个在线的常见问题,并且它被称为使用Ext3而不是Ext4,如果您使用的是Ext的正确版本,则代码运行没有任何问题。