Всякий учебник по программированию начинается с примера Hello, World! Вот и я начну с него же.
Кликните кнопку и вы увидете результат.
А вот тут заканчивается все легкое (хотя легкого ничего вроде как и не было)) ) и начинаются сложности.
ExtJS - очень мощный инструмент! И насколько он мощный, настолько же он и сложный. Разберем все по порядку:
Во-первых, для работы Экста (так я иногда буду называть ExtJS), требуются соответствующие файлы, а именно:
ExtJS/resources/css/ext-all.css ExtJS/adapter/ext/ext-base.js ExtJS/ext-all.js
то есть стили и скрипты. Все это добро вместе со всеми примерами и документацией вы можете скачать с официального сайта ExtJS.com . Вообще в нашем случае мы будем использовать более тяжелый файл ExtJS/adapter/ext/ext-base-debug.js , чтобы легче было отлаживать и чтобы изучая функции всякие, мы смотрели не на загадочные переменные типа a, b, c и т.п. , а нормальные width, scope и т.д.
Итак, при клике на кнопочку, мы вызывает функцию hello1. Вот код функции:
Ext.Msg.alert('Наше пробное сообщение','Hello, World!' );
Что мы имеем?
1) Сам объект Ext - Объект, хранящий все методы, свойства и т.п. нашей библиотеки (плин, по делетански так звучит!)) но пусть не будут ко мне строги профы. В первую очередь данный материал для начинающих прогеров, и я стараюсь выражаться как можно понятней. Ведь смысл часто не в том, как что-то называешь, а как ты это понимаешь).
2) Объект Msg, который является дочерним объекта Ext. На самом деле это очень большой объект, хранящий много всяких свойств, собственно говоря как и большинство других объектов Экста
3) alert - метод объекта Msg
То есть мы вызываем метод (функцию) alert объекта Msg, который в свою очередь является частью объекта Ext.
По большому счету, если не считать моей писанины, тут ничего сложного нет. Но это на первый взгляд. На самом деле нужно сначала посмотреть на то, что мы получили. А получили мы не самое красивое сообщение.
То есть какие минусы? Окошко сообщения слишком узкое, заголовок сообщния разбито на несколько строк.
Чтобы это исправить, нам нужно внимательно изучить объект Msg, а для этого мы обратимся к документации.
В первую очередь нужно разобраться с навигатором.
Документация имеет несколько плюсов и минусов.
Плюсы:
1) Богатая
2) Структурированая
Минусы:
1) Структурирована несколько запутано , ИМХО. Хотя наверняка будут и другие мнения
2) Очень мало примеров, тем более с подробными комментами
Итак, к делу. В первую очередь уже в корне мы видим два объекта Ext. Почему так? Вот тот что с плюсиком, это сам объект со всеми вложенными в него объектами, структура его. То есть разложив дерево, мы увидим все входящие в него объекты с их методами, свойствами и т.п.
А тот что ниже, содержит описание методов и свойств главного объекта, то есть Ext не только содержит в себе различные объекты, типа Msg, но и сам по себе содержит различные функции и т.п., что само по себе разумеющееся, но важно для понимание структуры как самого объекта, так и документации.
Так где же нам найти принадлежащий Эксту объект Msg? А вот это сделать сложно, ибо на самом деле Msg - сокращенное название объекта Ext.MessageBox . Конечно вроде и не сложно догадаться и можно наткнувшись на него в списке, понять что это именно он, но если искать буквально, то можно уже на этом этапе здорово раздосадоваться и забить на доку. Другого такого примера я не помню, так что уже легче :-)
Итак, Объект MessageBox объекта Ext.
Объект Msg — изображение пока не получено из архива
В перечне публичных свойств объекта MessageBox мы и видим что одно из них и указано как сокращеное наименование объекта.
На самом деле очень хочется надеяться что у вас имеется хорошее представление об ООП, ибо будет очень сложно с пониманием всех этих вложений объектов в объекты, а их уже в другие обэекты, и функций ихних, которые будут возвращать сами же себя и свои родительские объекты и свойства и т.п. Жуть в общем! Короче, буду дальше излагать как есть, и да не судите строго.
В общем, Изучая свойства и методы объекта Msg, мы находим тот метод, который мы вызывали в нашем примере, а именно alert.
метод alert объекта Msg — изображение пока не получено из архива
Рассмотрим его внимательней
alert( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox;
Что мы тут имеем?:
1) 2 обязательных параметра: title (Заголовок сообщения) , msg (собственно говоря само сообщение)
2) Необязательный параметр fn (пользовательская функция). Очень полезная штука! Тут в качестве параметра мы можем указать функцию, которая будет вызвана после закрытия сообщения, то есть при клике по кнопочке Ok сообщения. Синтаксис может быть двух видов:
а) название вызываемой функции. То есть если у вас объявлена ранее функция, к примеру callback() , то вы можете просто указать название функции, и она будет вызвана после закрытия сообщения. Вот пример:
<script type="text/javascript">
callback = function(){
alert('Была вызвана функция callback');
}
function hello2(){
Ext.Msg.alert('Наше пробное сообщение','Hello, World!', callback );
}
</script>
<input type="button" onclick="hello2();" value="Hello, World!" />
Обратите внимание, что название функции, передаваемой в качестве параметра, вы должны указывать не в ковычках, потому что вы передаете именно объект, то есть саму функцию, а не строковый параемтр, и сказать "название функции" на самом деле было вообще не корректно в данном случае.
б) Scope. Очень полезный параметр. Тут в качестве параметра передается ссылка на целевой объект, который внутри функции будет виден в качестве this. Это может быть любой объект, в том числе и сам Ext.
<script type="text/javascript">
callback2 = function(){
alert(this.MessageBox.alert);
}
function hello3(){
Ext.Msg.alert('Наше пробное сообщение','Hello, World!', callback2, Ext );
}
</script>
<input type="button" onclick="hello3();" value="Hello, World!" />
А вот тут нужно разобрать очень важный момент: на самом деле мы пошли на маленькую хитрость и в качестве параметра для базовой функции alert указали элемент this.MessageBox.alert, а так как scope у нас - Ext, соответсвенно мы и передали Ext.MessageBox.alert , то есть по сути мы вывели в сообщение функцию alert нашего объекта. И мы можем рассмотреть чтоже из себя представляет данная функция.
Вот листинг данной функции:
function (title, msg, fn, scope) {
this.show({title: title, msg: msg, buttons: this.OK, fn: fn, scope: scope});
return this;
}
То если если внимательно ее изучить, можно заметить что возвращает она результат выполнения своей же функции show, то есть Ext.Msg.show . Вообще конечно было бы проще просто в документации кликнуть на ссылку alert и открылся бы нужный участок кода, но не всегда же есть документация, а уметь отладить код и понять где что из себя представляет, всегда важно. В общем это на заметку.
Но тем не менее это все нам нужно и по другой причине. Вернемся все к той же проблеме: окошко сообщения "Hello, World!" у нас узкое, и нам нужно это дело поправить. Вот сейчас мы этим и займемся. Итак, изучив метод alert, мы теперь знаем что на самом деле мы через данный метод вызываем метод show все того же объекта Ext.Msg (Ext.MessageBox), а значит нам нужно изучить свойства данного метода. Кликнув по треугольничку перед названием метода, мы раскроем всю доку по данному методу, в котором очень подробно перечислены все возможные входящие параметры, которые можно указать при вызове данного метода. Итак, что же нам нужно чтобы решить нашу проблему? А достаточно на самом деле использовать не метод alert, а метод show, и передать в него нужные параметры, которые позволят сделать окошко таким, как нам надо. Учтите что в качестве параметра передается объект, а не куча параметров через запятую, как это происходит в случае с использованием метода alert.
<script type="text/javascript">
function hello4(){
Ext.Msg.show({
title: 'Наше пробное сообщение',
msg: 'Hello, World!',
width: 300,
buttons: Ext.Msg.OK
});
}
</script>
<input type="button" onclick="hello4();" value="Hello, World!" />
Вот теперь у нас сообщение по ширине составляет 300 пикселей, ибо столько мы указали и окошко выглядит гораздо симпатичней. Однако в данном случае нам пришлось указать еще один параметр, который мы не указывали при использовании метода alert, это buttons: Ext.Msg.OK
Что же это такое? На самом деле догадаться не сложно, это кнопка, то чнее это может быть и несколько кнопок, если мы укажем другой тип, к примеру Ext.Msg.YESNOCANCEL , в результате чего у нас будет 3 кнопки (Yes, No и Cancel соответственно). Еще тут можно кучу всяких параметров указать, такие как значек (внимание, вопрос и т.п. , fn , scope и прочие). Вообще только объект Msg можно изучать пару дней, не говоря уже о всяких там Гридах и т.п. Но изучив как следует, вы получите очень мощный инструментарий для своих веб-разработок.
Вот продемонстрирую еще один пример. Его не сложно понять, внимательно изучив документацию. Очень настоятельно рекомендую это зделать, ибо если вы поймете каждый символ этого листинга, можно утверждать с огромной долей вероятности что освоение Экста у вас пойдет довольно сносно. Итак.
<script type="text/javascript">
function hello5(){
var msg = Ext.MessageBox;
msg.minWidth = 300;
// обратите внимание что именно minWidth, а не width.
// Почему - предстоит вам понять, изучив внимательно доку
msg.alert('Наше пробное сообщение','Hello, World!' );
}
</script>
<input type="button" onclick="hello5();" value="Hello, World!" />
Вот такой на самом деле не простой получился первый урок. Те, кто дочитал до последних строк, достойны уважения за великое терпение как минимум ;-)
А чтобы мне легче было понимать значимость моих скромных трудов,