Tutorial:HTML Page Setup (Russian) (Legacy)
This version of our Learning Center is unmaintained.
This article may be out-of-date or contain incorrect information.
Please visit the new Sencha Learning Center for up-to-date material.
From Sencha - Learn
| Summary: Настройка HTML страницы |
| Author: Mjlecomte |
| Published: Октябрь 08, 2009 |
| Ext Version: 2.0+ |
Languages:  English  Portuguese  Русский
|
Contents |
Пустой HTML
Давайте создадим простую HTML страницу. По мере прохождения данного урока мы будем ее улучшать.
<!-- Не добавляйте никакие DOCTYPE сюда, если вы не хотите проблем с IE. --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>Настройка HTML страницы</title> </head> <body> </body> </html>
И так у нас готова базовая страница без DOCTYPE и с пустым body тегом.
Для поддержки свего языка желательно использовать кодировку utf-8 (для большей информации смотрите здесь).
Добавление заголовков
Хорошо, давайте подключим в наш код CSS и JavaScript.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>Настройка HTML страницы</title> <!-- ** CSS ** --> <!-- базовые файлы --> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- подключение основных библиотек --> <!-- ** Javascript ** --> <!-- ExtJS : основной/адаптер --> <!-- ExtJS : остальные виджеты --> <!-- переопределение основной библиотеки --> <!-- дополнения --> <script type="text/javascript"> </script> </head> <body> </body> </html>
Только что мы определили места, в которые будем подключать нужные нам файлы. Первое что мы сделали, это подключили CSS файл стилей. Базовый CSS файл в ExtJS (ext-all.css) содержит все необходимое, для дальнейшего построения нашей страницы. Если нам понадобится переписать какие-то классы стилей, это надо делать чуть ниже объявления основного CSS.
Дальше мы должны подключить JavaScript. Порядок подключения основных файлов.
Конечный шаблон
Как упоминалось выше, подключаем все необходимые скрипты.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title id='title'>Настройка HTML страницы</title> <!-- ** CSS ** --> <!-- базовые файлы --> <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> <!-- подключение основных библиотек --> <!-- ** Javascript ** --> <!-- ExtJS : основной/адаптер --> <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script> <!-- ExtJS : остальные виджеты --> <script type="text/javascript" src="../../ext-all-debug.js"></script> <!-- переопределение основной библиотеки --> <!-- дополнения --> <script type="text/javascript"> // Путь к пустому рисунку, должно указывать на действительное место на вашем сервере Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif'; Ext.onReady(function(){ console.info('woohoo!!!'); }); //end onReady </script> </head> <body> </body> </html>
Наши изменения:
- подключили ext-base.js. Стандартный адаптер для ExtJs.
- подключили ext-all-debug.js. файл для дебага.
- ссылка на файл s.gif so the Ext library isn't looking back at www.extjs.com
- команда console в блоке onReady . Чтобы после загрузки страницы мы могли видеть в консоли firebug соответствующее сообщение.
Не правельная ссылка на файлы
Итак переходим на нашу страницу по http://something (не file://) И видем такую картину:
Кликаем на красный кружок с X для открытия firebug и показа нам ошибки:
Ext не определен? WTF? Давайте проверим вывод в закладке NET :
Все выделенное красным - не найдено. Если вы наведете на такую строку мышь, вы увидите от куда страница пытается загрузить необходимый ресурс. Значиит мы допустили ошибку в коде, исправляем ее и обновляем страницу:
Успех
Woohoo! Нет ошибок в firebug и был выполнен блок Ext.onReady() . Это означает, что ExtJS успешно загружен и готов для дальнейшего использования!!