Здесь расположен мой авторский перевод официальной документации фреймверка Ext JS v.4.2 на русский язык. Для перевода были выбраны основные статьи, изучение которых должно быть достаточно для начала использования Ext JS. Англоязычную документацию вы можете найти по ссылке:
http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started
Приятного чтения!
* * *
Оглавление
Введение
1.1 Поддерживаемые веб-браузеры
Фреймверк Ext JS 4 поддерживается всеми современными браузерами, начиная от Internet Explorer 6 и кончая последней версией Google Chrome. Для разработки рекомендуется использовать браузеры со встроенными средствами отладки веб-приложений:
- Google Chrome 10+
- Apple Safari 5+
- Mozilla Firefox 4+ с расширением Firebug
Предполагается, что вы используете последнюю версию Google Chrome. Если вы не имеете этого браузера, видимо, настал момент установить Chrome, и настроить себе расширение Chrome Developer Tools.
1.2 Веб-сервер
В принципе, фреймверку Ext JS 4 не требуется для своей работы никакого локального веб-сервера. Однако следует помнить, что поддержка технологии XMLHttpRequest через протокол file:// имеет множество ограничений во всех браузерах. Если вы еще не используете какой-либо веб-сервер, мы рекомендуем установить веб-сервер Apache.
1.3. Ext JS 4 SDK
Скачайте Ext JS 4 SDK. Распакуйте архив в новую директорию с именем extjs в корне файловой структуры вашего веб-сервера (виртуального хоста). Если вы не знаете, где находится корневая директория вашего веб-сервера, обратитесь к документации. Расположние корневой директории веб-сервера зависит от вашей операционной системы. Типовые месторасположения корневой директории веб-сервера Apache следующие:
- Windows - "C:\Program Files\Apache Software Foundation\Apache2.2\htdocs"
- Linux - "/var/www/"
- Mac OS X - "/Library/WebServer/Documents/"
Когда вы закончите инсталлировать Apache и Ext JS, откройте ссылку http://localhost/extjs/index.html в вашем браузере. Если вы увидели страницу приветствия Ext JS, значит вы все установили правильно.
2. Структура Ext JS приложения
2.1 Основная структура
Фреймверк Ext JS не навязывет какую-либо обязательную структуру проекта, но мы рекомендуем придерживаться нескольких устоявшихся правил, которые помогут вам сохранить проект в хорошо сруктурированном состоянии, пригодным для последующего расширения и сопровождения. Рекомендуемая структура каталогов при использовании Ext JS представлена ниже:
- appname
- app
- namespace
- Class1.js
- Class2.js
- ...
- extjs
- resources
- css
- images
- ...
- app.js
- index.html
Назначение директорий:
- appname - это директория, где размещаются все файлы веб-приложения;
- app - директория, содержащая все ваши классы, правила именования которых описаны в соглашении об именовании в документации по системе классов;
- extjs - директория, содержащая файлы самого фреймверка Ext JS 4 SDK;
- resources - директория, содержащая дополнительные файлы, такие как *.css и файлы изображений, ответственные за оформление интерфейса, а так же файлы различных статических ресурсов (XML, JSON, и т. д.).
- index.html - основной файл, начальный HTML-документа;
- app.js - файл с логикой вашего веб-приложения.
Создавать эти директории можно в любой момент. Сейчас давайте сосредоточимся на создании минимального кода, который позволит нам выполнить первое Ext JS приложение. Мы создадим базовое Ext JS-приложение в стиле "hello world", которое мы назовем "Hello Ext". Вначале нужно создать следующие директории и файлы, расположив их в корневой директории веб-сервера (или виртуального хоста):
- helloext
- app.js
- index.html
Затем распакуйте Ext JS 4 SDK в директорию extjs, разместив её в директории helloext.
Обычно типовое приложение Ext JS начинают создавать с HTML документа index.html. Откройте файл 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>
В этом HTML-коде подключаются следующие файлы:
- extjs/resources/css/ext-all.css - содержит все стили, требуемые для фреймверка Ext JS;
- extjs/ext-debug.js - содержит минимально необходимый набор библиотечных классов с ядром Ext JS 4;
- app.js - содержит код вашего веб-приложения.
Теперь вы готовы написать ваше веб-приложение. Откройте файл app.js и вставьте в него следующий JavaScript-код:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}]
});
}
});
Затем запустите браузер и перейдите по ссылке http://localhost/helloext/index.html. Вы увидите панель с заголовком, содержащим текст "Hello Ext", и текст приветствия в основной области панели.
2.2 Динамическая загрузка кода
Окройте отладчик Chrome Developer Tools и переключитесь на консоль отладки. Обновите страницу с приложением Hello Ext. Вы увидите следующее сообщение в консоли:
[Ext.Loader] Synchronously loading 'Ext.container.Viewport'; consider adding Ext.require('Ext.container.Viewport') above Ext.onReady
Фреймверк Ext JS 4 имеет подсистему динамической загрузки кода, которая подгружает только те библиотеки, которые необходимы вашему приложению. В нашем примере вызов Ext.create создает экземляр Ext.container.Viewport. Когда происходит вызов Ext.create, происходит проверка, существует ли в коде определение Ext.container.Viewport. Если такого определения нет, происходит подгрузка кода, отвечающего за реализацию Ext.container.Viewport, причем эта подгрузка произойдет перед созданием экземпляра объекта класса Ext.container.Viewport.
В нашем примере файл Viewport.js будет автоматически подгружен, однако такая динамическая подгрузка кода не очень оптимальна. Когда происходит загрузка файла Viewport.js, требуемого для создания экземпляра Ext.container.Viewport, выполнение основного кода останавливается, пока не будет подгружен файл. Ожидание подгрузки файла будет создавать некоторую задержку. Такие задержки могут в результате сложиться в очень большую задержку, если будет последовательно выполняться создание экземпляров различных классов. Выполнение приложения, особенно в начале, будет прерывистым и раздражающим.
Чтобы избавиться от этой проблемы, следует в начале работы приложения Ext JS использовать команду предварительной загрузки кода:
Ext.require('Ext.container.Viewport');
Эта команда гарантирует, что код, содержащий реализацию Ext.container.Viewport будет подгружен перед запуском основного приложения. И вышеприведенное предупреждение больше не будет появляться в отладочной консоли. Вы можете в этом убедиться, обновив страницу в браузере после внечения данного изменения в код вашего приложения.
2.3 Методология подключения библиотек
Когда вы распаковываете архив с Ext JS 4, вы можете обнаружить там следующие файлы:
- ext-debug.js - этот файл должен использоваться только при разработке приложения. Он содержим минимально необходимый набор классов, требуемых для выполнения Ext JS приложения. Все дополнительные классы должны быть динамически подгружены как отдельные файлы, как это было продемонстрировано выше.
- ext.js - то же самое что и ext-debug.js, но только минимизированный для использованя в продакшене (т. е. на боевом сервере). Предназначен, чтобы использоваться совместно с вашим app-all.js файлом (смотри раздел 3).
- ext-all-debug.js - этот файл содержит все библиотеки фреймверка Ext JS. Он предназначен для того, чтобы сократить кривую обучения возможностям фремверка. С помощью него можно быстро начать разрабатыват Ext JS приложения, не отвлекаясь на тонкости подгрузки необходимых библиотек.
- ext-all.js - то же самое что и ext-all-debug.js, только минимизированный. Его можно использовать в продакшене только с том случае, если у вас большое приложение, использующее все возможности фреймверка. Однако, чаще всего приложение не будет использовать все классы, которые содержатся в этом файле, поэтому его использование в продакшене обычно неэффективно. Вместо него рекомендуется использовать специализированные сборки, о которых написано в разделе 3.
3. Публикация кода на боевом сервере (Deployment)
Недавно введенный в SDK набор инструментов (Sencha SDK Tools, загрузка здесь) обеспечивает легкое и простое развертывание любого Ext JS приложения. Этот инструментарий генерирует декларацию JavaScript-зависимостей в формате JSB3 (формат JSBuilder) и создает специализированную сборку, в которую включается только необходимый для приложения код.
После того, как вы инсталлировали Sencha SDK Tools, откройте окно с терминалом и перейдите в директорию вашего приложения, например:
cd path/to/web/root/helloext
Находясь в этой директории, выполните несколько простых команд. Вначале сгенерируйте JSB3-файл:
sencha create jsb -a index.html -p app.jsb3
Для приложений, которые используют серверные скриптовые языки для создания динамического содержания, такие как PHP, Ruby, ASP и т.д., вам необходимо заменить index.html на актуальный URL к основному фронт-контроллеру вашего приложения:
sencha create jsb -a http://localhost/helloext/index.html -p app.jsb3
Команда sencha create просканирует файл index.html и всю структуру каталогов на наличие подключаемых файлов, которые фактически используются в приложении, а затем создаст JSB-файл с именем app.jsb3. Генерирование JSB3-файла перед конечной сборкой приложения позволяет разработчику внести в него изменения перед тем, как приложение будет окончательно собрано. Однако мы не будем ничего в нем менять, и просто соберем приложение с помощью второй команды:
sencha build -p app.jsb3 -d .
Эта команда создаст два файла, основываясь на данных из файла app.jsb3:
- all-classes.js - этот файл содержит все классы, используемые в приложении. Это не минимизированный файл, поэтому он полезен для отладки приложения на боевом сервере. В нашем примере этот файл пуст, потому что приложение "Hello Ext" не содержит классов.
- app-all.js - этот файл содержит минимизированную сборку всех классов приложения плюс все Ext JS классы, необходимые для работы приложения. Это версия с минимизированным кодом, пригодная для использования в продакшене, и фактически содержит минимизированный файл all-classes.js плюс файл app.js.
Строго говоря, в Ext JS нам необходимо иметь две разные версии index.html - версию для продакшена и версию для отладки. Вы будете встречаться с этим, когда столкнетесь с реальным процессом сборки под различную логику на стороне сервера. Но сейчас давайте просто создадим новый файл с именем index-prod.html в директории helloext, чтобы проверить, что собранные через систему сборки файлы нормально работают:
<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.js"></script>
<script type="text/javascript" src="app-all.js"></script>
</head>
<body></body>
</html>
Обратите внимание, что файл ext-debug.js теперь заменен файлом ext.js, и файл app.js заменен на app-all.js.
Если вы теперь откроете в браузере ссылку http://localhost/helloext/index-prod.html, вы увидите версию для продакшена нашего приложения "Hello Ext".
Поиск по сайту