Создание первого приложения

Последнее обновление: 1.11.2015

Теперь чтобы непосредственно начать работать с Ext JS 4 создадим первое приложение. Оно будет очень простым и его единственная цель по сути будет состоять в выводе строки на экран. Итак, создадим следующий файл index.html, который у нас будет находится на веб-сервер в соседней папке по отношению к папке фреймворка extjs:

<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-all-dev.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>

В данном случае у нас по сути мало что делается: сначала мы подключаем стили ext js (ext-all.css), затем файл фреймворка (ext-all-dev.js или ext-all.js). И в последнюю очередь - сам файл приложения - app.js. Собственно в нем и будет происходить вся нехитрая магия.

Теперь создадим файл приложения app.js, который будет содержать следующий код javascript:

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    title: 'Приложение на Ext JS 4',
                    html : '<h3>Добро пожаловать в мир Ext JS 4!</h3>'
                }
            ]
        });
    }
});

То есть теперь приложение будет иметь следующую структуру (в моем случае папка приложения называется helloext, а в качестве примера используется сервер IIS):

Теперь мы можем посмотреть приложение в действии, запустив в браузере нашу страницу index.html:

В будущем мы более подробно рассмотрим классы и виджеты Ext JS, а пока вкратце посмотрим по коду, что делает данное примитивное приложение. Итак, вначале мы инициализируем новое приложение вызывая функцию Ext.application. Мы указываем имя приложения (helloext) и те действия, которые будут производиться при его запуске.

В частности с помощью функции Ext.create создается новый объект класса Ext.container.Viewport, для чего загружается файл Viewport.js. И затем мы наполняем созданный контейнер элементами с помощью массива items и устанавливаем его расположение на странице.

Итак, мы познакомились вкратце с Ext JS 4. А теперь приступим к более подробному и детальному рассмотрению данного фреймворка.

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850