Ext JS application shows blank page

Обновить

November 2018

Просмотры

2.2k раз

1

Я новичок в 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, он показывает мне эту ошибку: неперехваченный SyntaxError: Неожиданный токен <в app.js: 1

Я изо всех сил старался, но не получил ни малейшего представления о том, что происходит неправильно в app.js

Я уверен, что моя база правильно настроена и работает, но страница будет пустой, если он загружен.

Спасибо.

2 ответы

1

Я нашел, что это общая проблема в Интернете, и это называется использование Ext3 вместо Ext4, код работает без каких-либо проблем, если вы используете правильную версию Ext Wich в этом случае Ext4.

5

Вы, вероятно, лучше удач с использованием реальных Javascript вместо их неправильно копировать / вставить HTML завернутого яваскрипта текста:

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