Ссылки на все статьи данного раздела вы сможете посмотреть в посте Уроки по ExtJS 4.
Ext JS 4 является одним из самых передовых JavaScript фреймворков, когда-либо созданных.
Как замечают сами разработчики, при разработке Ext JS 4 преследовались три основные цели: скорость, надежность и легкость использования. Разработчики пытались достичь того, чтобы части фреймворка надежны и одинаково хорошо работали на любом браузере, были просты в освоении и использовании.
И следует отметить, что это у них получилось.
ExtJS 4 поддерживает все основные типы браузеров, включая даже такой раритет как IE 6, не говоря уже о последних новинках на рынке браузеров.
Итак, приступим к изучению ExtJS 4.
Если вы до сих пор не скачали SDK, то нужно немедленно .
Для некоторых наших примеров вам потребуется веб-сервер (например Apache или IIS), для других же он будет необязателен, однако его настройку я рассматривать не буду.
Первое, что потребуется при работе с ExtJS – настроить разметку HTML страницы:
Обратите внимание, что DOCTYPE мы оставляем неуказанным, иначе можно получить неожиданные проблемы в Internet Explorer.
Все пути к скриптам указаны из расчета, что ExtJS лежит в папке ext в корневой папке веб-сервера. При необходимости исправьте этот путь на тот, который соответствует вашему проекту.
Итак, рассмотрим, что мы сделали:
- Подключили ext-base.js – базовый файл для ExtJS.
- Подключили ext-all-debug.all – собственно все функции ExtJS
- Подключили ext-all.css – файл стилей, необходимый для отображения элементов (в данном уроке не используется)
Теперь добавьте следующий фрагмент кода в секцию head вашего сайта:
Рассмотрим использованный в примере код:
Ext.onReady(fn, scope);
Это функция, которую вы будете использовать в каждом своем проекте, использующим ExtJS. В качестве параметра ей передается функция, которую необходимо выполнить после того, как в память полностью загрузится объектная модель документа (DOM), гарантируя, что все элементы к которым вы можете захотеть обратиться будут уже загружены в память к моменту запуска скрипта.
Параметр scope в данном примере не используется, он задает контекст вызова функции – объект, к которому можно будет обращаться как к this в теле функции.
После запуска данного примера вы увидите на экране такое вот окно:
Вот так мы создали свое первое простейшее приложение с использованием ExtJS! До новых встреч!
[...] Урок №1 – Введение в ExtJS [...]
Пример хорош для первого урока.
Код в примере устарел.
Вместо ext/adapter/ext/ext-base.js в ExtJS-4.0.1 теперь ext/bootstrap.js
Причём, он только интеллектуально подключает ext/ext-all-debug.js либо ext/ext-all.js
Интеллект, разумеется, иногда тупит, и лучше просто подключить напрямую ext/ext-all-debug.js
Ext.Msg.alert(“Приветствие!”, “Добро пожаловать в ExtJS 4.0!!!”);
JavaScript различает маленькие и большие буквы.
Спасибо за замечания.
Насчет bootstrap не знал, использую по-старинке. Да и как вы правильно заметили, лучше напрямую подключать необходимый файл, т.к. ExtJS и без того не маленький, а тут еще глючный bootstrap который дополнительное место занимает.
[...] начала возьмем разметку страницы из первого урока по ExtJS. Аналогично тому уроку следует подключить файлы [...]
Сделайте ссылки к следующим урокам в этом уроке.!
Вот, взял ваш пример, не подскажете в чем проблема?
Не хочет срабатывать, тоисть пример не работает у меня, что я сделал не так?
ExtJs-4.0.7
Закинул весь фреймворк в папку ext, в той же папке находится index.txt(не в ext)
Линки на файлы правильные, работают если кликнуть с Ctrl
Html грузит
Вот код.
Изучаем ExtJS 4
Ext.onReady(function() {
Ext.Msg.alert(“Приветствие!”, “Добро пожаловать в ExtJS 4.0!!!”);
}); //end onReady
11111
Спасибо.
я имел введу index.html
О Гтмл автоматически не напечатался, попробую без этого тэга.
Изучаем ExtJS 4
Ext.onReady(function() {
Ext.Msg.alert(“Приветствие!”, “Добро пожаловать в ExtJS 4.0!!!”);
}); //end onReady
11111
Блин
Что-то ничего из написанного вами не понятно…
Oleg, прочитайте комментарий пользователя zbl. Там надо поменять /ext/adapter/ext/ext-base.js на ext/bootstrap.js если у вас версия 4.0.7. Я тоже вначале был удивлен. Скачал я ExtJS, но не мог понять откуда в примерах берут папку /ext/adapter ? Ведь в новом же этой папки нет… Спасибо zbl за прояснение.
У кого не работает, пути прописывайте через точку вначале, например