HelloWorld: Библиотека ExtJS для новичков
Это первая статья из цикла уроков по самой интересной и функциональной на сегодняшний день библиотеки виджетов ExtJS. Публикация материала будет проходить от простого к сложному, поэтому к маститым разработчикам просьба: не критиковать за разъяснения очевидных вещей.
Необходимые инструменты
Для запуска примера из этого раздела нам не потребуются специальные навороченные среды разработки (типа Eclipse), а будет достаточно современного браузера Firefox с дополнительным пакетом расширения Firebug.
Если Firefox еще не установлен на вашем компьютере, то пора скачать и установить его. После чего запустите Firefox и введите в адресной строке https://addons.mozilla.org/ru/firefox/search?q=Firebug. Откроется окно:
Щелкаем по кнопке Добавить в Firefox, расположенной справа от описания необходимого нам дополнения Firebug. Появится дополнительное окно, которое сообщит о намерении установки нового расширения:
Нажимаем кнопку Установить, после чего произойдет загрузка пакета и его установка в систему. Далее, потребуется выполнить перезапуск браузера для чего нужно щелкнуть по кнопке Перезапустить Firefox:
Нажимаем кнопку F12 и убеждаемся, что Firebug корректно установлен и активен. Если все прошло нормально, внизу окна появится дополнительная область с несколькими вкладками. Пока проверим, что эта панель отобразилась, а ее использование подробнее рассмотрим чуть позже.
Создание html файла
Начнем с создания HTML файла – каркаса нашего приложения, который будет загружать и инициализировать библиотеку ExtJS. Откроем любой текстовый редактор и скопируем простой HTML код:
<html> <head> <link href="http://extjs.com/deploy/dev/resources/css/ext-all.css" type="text/css" rel="stylesheet"> <script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"> </script> </head> <body> </body> </html>
Вот что получилось:
Давайте рассмотрим этот файл подробнее. Сначала мы определяем стандартные HTML теги: начало документа <html> и начало заголовочной секции документа <head>. Далее по тексту расположены соответствующие им закрывающие теги: </html> и </head>. Таким образом основной код нашего документа сейчас сконцентрирован в секции <head>, а раздел, отделенный тегами <body>, в данный момент пока не имеет содержимого. Обратите внимание на один тег <link> и два <script>. Первый выполняет подключение внешнего файла по адресу http://extjs.com/deploy/dev/resources/css/ext-all.css, который содержит таблицы стилей CSS. Этот файл является частью библиотеки ExtJS и находится на сервере ее разработчиков. На данном этапе для удобства мы не будем копировать необходимые нам файлы на локальный компьютер, однако в дальнейшем рассмотрим и этот вопрос. Вторые два тега <script> выполняют подключение файлов с JavaScript кодом библиотеки (http://extjs.com/deploy/dev/adapter/ext/ext-base.js и http://extjs.com/deploy/dev/ext-all.js) и также находятся на сервере ее разработчиков. Первый файл является базовым загрузчиком, а второй содержит необходимые текущему приложению компоненты (в нашем случае all – все). Порядок подключения этих файл критичен: если теги поменять местами – библиотека работать не будет.
В дальнейшем для ускорения загрузки своих приложений, созданных с использованием ExtJS, можно провести кастомизацию компонентов и исключить неиспользуемые.
Работа с Firebug
Сохраняем файл где-нибудь на своем локальном компьютере под именем helloworld.html и открываем через меню Файл -> Открыть файл в Firefoxе:
Нажимаем кнопку F12 для вызова отладчика Firebug. В отобразившейся нижней панели мы увидим набор вкладок Console, HTML, CSS, Script, DOM, Net, часть из которых неактивна (подсвечена серым цветом). По-умолчанию это сделано для того, чтобы процесс отладки Firebug не замедлял работу браузера при просмотре обычных сайтов, и включался только для тех, где он необходим.
Обратите внимание, что во второй вкладке HTML, которая скорее всего будет активна при старте Firebug, отображается древовидная структура нашего HTML файла. Это так называемая DOM-модель HTML документа, каждый из узлов которой представляет собой отдельный элемент.
Мы вернемся к ней немного позже, а сейчас перейдем на вкладку Console:
Как уже и говорилось ранее, Firebug по-умолчанию не работает со всеми сайтами, поэтому требует для каждого отдельной активации. В нашем случае вместо сайта используется локальный файл, поэтому активировать Firebug будем для всех локальных документов. Первоначально нам потребуется только консоль отладчика, поэтому поставим галочку напротив Console и нажмем кнопку Enable selected panels for Local Files. В результате получим интерактивную консоль для построчной отладки программ на языке JavaScript:
В верхней ее области будет отображаться вывод результатов обработки команд, а в самой нижней (где расположено приветствие > > >) можно вводить сами команды. Как это принято в учебниках многих языков программирования и сред разработки, напишем код, который будет выводить на экран небольшое приветствие. Введем в нижней строке: Ext.MessageBox.alert("Привет мир!"):
После чего нажмем Enter, и на экране отобразится симпатичное окошко:
Попробуйте его переместить в другую область окна. Неправда ли, оно ведет себя схожим образом с обычным окном с сообщением операционной системы за исключением того, что его нельзя переместить за пределы окна браузера?
Обратите внимание на консоль Firebug: после исполнения команды в консоли отобразилась как сама команда, так ссылка на новый объект, который вернула функция alert (зеленым цветом). Давайте подробнее посмотрим на только что вызванную функцию:
- Ext – класс библиотеки ExtJS, содержащий все функции, свойства, классы и объекты доступные из библиотеки
- MessageBox – класс, содержащий функции и свойства для отображения сообщений подобных всплывающим сообщениям операционной системы
- alert – функция, вызываемая с одним или несколькими параметрами для выполнения вывода окна с сообщением
Вся команда звучит следующим образом (читаем справа налево): Вызвать функцию alert с параметром «Привет мир!» из объекта MessageBox, который в свою очередь находится в объекте Ext.
Набирать длинные команды в одной строке Firebug достаточно неудобно, поэтому следующим шагом щелкнем по самой нижней правой красной кнопке со значком ^ и переключимся в режим полноценного редактора:
Теперь мы сможем набирать команды в несколько строк и запускать их на выполнение нажатием комбинации Ctrl-Enter (в однострочном режиме просто Enter). Попробуем усложнить пример и напишем длинную команду для вывода сообщения с множественным выбором вариантов действий пользователя:
Ext.MessageBox.show({
title: "Сохранить?",
msg: "Имеются изменения",
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
})
Вот что у нас получилось при выполнении команды:
Рассмотрим подробнее: в этом случае вызывается функция show класса MessageBox с параметром, являющимся составным объектом (содержимое, заключенное в фигурные скобки). У этого объекта имеются четыре свойства: title, msg, buttons, icon. Несложно понять, что title и msg задают текстовое содержимое заголовка окна и самого сообщения, а buttons и icon указывают на параметры внешнего оформления. Вы наверное заметили, что здесь мы использовали краткую запись класса MessageBox – Msg, так как это удобнее для использования. Следующие варианты применения эквиваленты: Ext.MessageBox.alert(«Тест») и Ext.Msg.alert(«Тест»)
Где можно взять допустимые значения параметров иконок, кнопок и прочего? Для нашего примера, в котором используется класс MessageBox мы перейдем на страницу документации библиотеки ExtJS и в дереве объектов последовательно выберем класс Ext, а затем MessageBox:
Мы попали на страницу описания класса MessageBox, где подробно указаны доступные функции, константы и принимаемые значения. Попробуйте поэкспериментировать с ними: например, изменить нашу последнюю команду, задав другой набор кнопок и иконку.
Перейти далее к разделу Панели…
Перейти к содержанию Учебника по ExtJS
Отличная статья, однако я бы рекомендовал для знакомства все же подключать отладочные версии библиотеки ext-all-debug.js а также описать уже в начале работу с событиями и обработчиками, в частости – для кнопки/меседжбокса это handler свойство.
Описание функций-обработчиков доступно в следующих статьях
спасибо, про файрбаг знал и пользовался, но не знал что можно прям в консоли писать команды
)
Спасибо! Ваша статья для новичков – самое то! Мне очень помогла! =)
Статья полезная, особенно при наличии нормальной документации на офф сайте. Сделали б что-нибуть подобное как manual по Zend Framework, в PDF и человеческим языком. Вроде искал, не нашёл ничего похожего. Мож у кого есть нормальные доки, поделитесь )
Отличная статейка.. с хорошим пояснением
Спасибо.
За статью.
Спасибо за статью. Обеспечила быстрый старт.
Огромное спасибо! Узнал много нового и про firebug и про экст )
Респект!
Огромное спасибо за статью !!!!!
Да нормально блин! Во поперло! Спасибок!
Хороший сайт и отличная статья, самое то для того кто только что открыл для себя ExtJS
Спасибо за статью.
Пути загрузки css/js прописал как сказано в статье, но после обновления странички firebug выдал ошибку в таком вот виде:
Node was not found» code: «8
Filtered chrome url chrome://flashblock/content/flashblock.xml
flashblock.xml (строка 40)
Чтобы это могло быть и как его устранить?
спасибо за пример, теперь есть с чего начать
а то не знал с какого конца подойти 