admin管理员组

文章数量:1277284

Looking into ExtJS 4 and I am attempting to do the "Hello World" tutorial here: /

I have all my files setup as remended in the tutorial:

But, I keep getting an error due to the funky syntax that starts their file:

I'm not using JQuery or any other libraries - since Sencha is supposed to be a plete javascript environment.

Here is the plete code:

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! Wele 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>

Any ideas on what could be the culprit?

Looking into ExtJS 4 and I am attempting to do the "Hello World" tutorial here: http://www.sencha./learn/getting-started-with-ext-js-4/

I have all my files setup as remended in the tutorial:

But, I keep getting an error due to the funky syntax that starts their file:

I'm not using JQuery or any other libraries - since Sencha is supposed to be a plete javascript environment.

Here is the plete code:

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! Wele 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>

Any ideas on what could be the culprit?

  • javascript
  • extjs4
  • extjs
Share Improve this question asked Jan 18, 2012 at 19:56 PhillipKreggPhillipKregg 9,3588 gold badges50 silver badges63 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 6

You're not supposed to have any HTML in a JS file. The code in the tutorial is screwed up. Those anchor href tags are links to ExtJS API documentation, that somehow got inserted into example code.

The actual code should be:

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

I've put up a bug report about that page here: http://www.sencha./forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098

Added Jan 21st, 2012: apparently the correct version of that tutorial is available at: http://docs.sencha./ext-js/4-0/#!/guide/getting_started

You need to update your "app.js"(strip out html tags):

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

Javascript parser does not understand html tags you happened to copy while creating your "app.js" file.

This is minimal HTML page to run ExtJS 4 without MVC:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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('Wele', 'Hello, World!');
            });
        </script>
    </body>
</html>

And this one is with MVC:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3/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>

The code of app.js: 

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

More details in my online demos:

ExtJS 4 "Hello World" Application

ExtJS 4 "Hello World" Application Using Ext Loader

ExtJS 4 MVC "Hello World" Application

本文标签： javascriptSencha ExtJS 4Basic hello world demo issuesStack Overflow

版权声明：本文标题：javascript - Sencha ExtJS 4 - Basic hello world demo issues - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741220609a2360898.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。