Sencha ExtJS 4 - Основные демо-проблемы - PullRequest
Новая
       4

Sencha ExtJS 4 - Основные демо-проблемы

7 голосов
/ 18 января 2012

Заглядывая в 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>

Есть идеи о том, что может быть виновником?

Ответы [ 3 ]

6 голосов
/ 19 января 2012

У вас не должно быть HTML в файле JS.Код в руководстве испорчен.Эти якорные теги href являются ссылками на документацию по API ExtJS, которая каким-то образом вставлена ​​в пример кода.

Фактический код должен быть:страница здесь: http://www.sencha.com/forum/showthread.php?175129-Documentation-Getting-Started-with-Ext-JS-4.0&p=717098#post717098

Добавлено 21 января 2012: по-видимому, правильная версия этого учебника доступна по адресу: http://docs.sencha.com/ext-js/4-0/#!/guide/getting_started

2 голосов
/ 18 января 2012

Вам необходимо обновить ваш "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 не понимает html-теги, которые вы скопировали при создании файла "app.js".

0 голосов
/ 29 мая 2017

Это минимальная HTML-страница для запуска ExtJS 4 без 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.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"

Приложение ExtJS 4 «Hello World» с использованием Ext Loader

ExtJS 4 MVC Приложение "Hello World"

...