Введение в Ext JS 4

Общий обзор фреймворка Ext JS

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

Ext JS представляет собой библиотеку JavaScript для разработки веб-приложений и пользовательских интерфейсов. И прежде всего Ext JS предназначен для создания RIA-приложений, то есть таких интернет-приложений, которые отличаются богатым и насыщенным интерфейсом.

Ext JS помогает организовывать и управлять элементами на веб-странице и проводить более точную и эффективную их настройку. Причем данный фреймворк позволяет не только эффективно работать с элементами управления, но и с некоторыми графическими моментами, например, с диаграммами.

Возможности, предоставляемые данным фреймворком, позволяют применять к веб-приложениям шаблон MVC, который позволяет отделить логику приложения, и его данные от визуальной части.

Еще одной важной чертой фреймворка является кроссбраузерность. В настоящее время Ext JS поддерживается следующими версиями браузеров:

  • Internet Explorer 6+

  • Firefox 3.6+ (PC, Mac)

  • Safari 4+

  • Chrome 10+

  • Opera 11+ (PC, Mac)

Кроме того, Ext JS постоянно развивается и совершенствуется. Текущая версия, выпущенная в 2011 - четвертая. А если говорить о подверсиях, то текущая стабильная версия на момент написания этой статья - Ext JS 4.1.1 (выпущена в июле 2012 года).

Установка Ext JS 4

Чтобы начать работать с Ext JS, весь пакет фреймворка (SDK Ext JS) надо загрузить с официального сайта разработчиков библиотеки - http://www.sencha.com/products/extjs/.

На момент написания этой главы доступна версия 4.2, которая и будет использоваться в дальнейшем.

Поскольку при работе с запросами ajax браузеры, как правило, не работают с локальными файлами, то рекомендуется развернуть фреймворк на веб-сервере. В качестве веб-сервера можно взять Apache или IIS. Поэтому после загрузки архива распакуйте его в корневую папку веб-сервера и назовите распакованную папку со всеми файлами extjs. Хотя ряд примеров и приложении можно запускать и с локального диска по протоколу file.

Корневая папка веб-сервера зависит от ОС и выбранного веб-сервера.

Например, для сервера Apache это может быть:

  • Windows - C:\Program Files\Apache Software Foundation\Apache2.2\htdocs

  • Linux - /var/www/

  • Mac OS X - /Library/WebServer/Documents/

В IIS корневой папкой выступает C:\inetpub\wwwroot.

После распаковки можно проверить правильность установки фреймворка, запустив веб-сервер и перейдя в браузере по адресу http://localhost/extjs/index.html.

Поскольку не всегда удобно создавать файлы в каталогах веб-сервера, то для тестирования можно использовать браузер Mozilla Firefox, который позволяет запустить веб-страницы с ExtJS 4 и с других каталогов, а не обязательно каталогов веб-сервера. Хотя в этом случае опять е не все функции, например, AJAX, могут быть доступны.

Краткий обзор Ext JS 4 SDK

В корневой папке библиотеки (которую мы ранее назвали extjs) будет располагаться несколько файлов и папок:

  • ext-all.js - этот файл включает весь фреймворк Ext JS

  • ext.js - этот файл содержит минимальный код фреймворка Ext JS

  • При разработке нового приложения с использованием фреймворка мы прежде всего добавим ссылки на файлы Ext JS на html-странице. Если мы выберем файл ext-all.js, то браузер при вызове кода фреймворка будет подгружать всю библиотеку Ext JS.

    А в случае выбора файла ext.js браузер будет подгружать только минимально необходимый код для выполнения приложения. Поэтому выбор этого файла рекомендуется для разработки и тестирования. Но при развертывании приложения все же рекомендуется использовать полную версию фреймворка - ext-all.js.

    Эти файлы содержат ряд версий. В частности:

  • Версии файлов с суффиксом *-dev.js - это не минимизированные версии файлов, содержащие отладочный код и рекомендуемые для разработки и тестирования

  • Версии файлов с суффиксом *-debug.js - это не минимизированные версии файлов, не содержащие отладочный код и рекомендуемые только для тестирования

  • В отличие от своих двойников файлы ext-all.js и ext.js являются минимизированныеми. Поэтому они более удобны при развертывании приложения.

  • bootstrap.js. Мы можем импортировать этот файл вместо ext-all.js. А файл bootstrap.js уже импортирует либо ext-all-debug.js (если хостом является localhost или текущий протокол не http, а file), либо ext-all.js (в остальных случаях).

Директории фреймворка Ext JS:

  • docs. Содержит полную документацию по фреймворку

  • examples. Содержит примеры использования компонентов Ext JS

  • locale. Содержит переводы компонентов на другие языки

  • resources. Включает файлы css и изображений и тем, используемые фреймворком

  • src. Содержит весь исходный код Ext JS

  • builds. Содержит дополнительные файлы фреймворка Ext JS

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