From Learn About the Ext JavaScript Library

Введение

Вы наверняка видели страницу с примерами (по крайней мере туда сразу заходит большинство людей, которые первый раз на этом сайте), были впечатлены красотой и функциональностью библиотеки Ext и вот решили попробовать ее на деле, чтож давайте попробуем... Для начала убедитесь, в том что Вы пользуетесь браузером FireFox :) и в том что у Вас установлено расширение FireBug, без него отладить ничего толком не получится, покрайней мере будет намного тяжелее. Убедились? Тогда вперед.

Поехали

Для начала проделайте следующие шаги:

• Перейдите на страницу Ext API Documentation.
• Нажмите F12 чтобы открыть FireBug.
• Перейдите на вкладку "Console" и нажмите маленькую красную кнопку в правом нижнем углу.
• В появившемся поле наберите строку:

Ext.get(document.body).update('<div id="test"></div>');

• И нажмите Ctrl+Enter, чтобы выполнить ее.

Как вы догадались FireBug позволяет выполнять JavaScript налету, а строка которую мы ввели заменила все содержимое тега body на указанный нами div, вот с этим дивам мы и будем пока работать. Теперь давайте попробуем что-нибудь создать с помощью Ext, как насчет симпатичной сворачиваюшейся панельки с заголовком и каким-нибудь текстом внутри. Для этого выполните в консоли следующий код:

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'Панелька',
	html: 'Причем довольно симпатичная :)',
        collapsible: true
});

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