Уроки ExtJS




Скачать 314.31 Kb.
НазваниеУроки ExtJS
страница1/7
Дата публикации20.05.2013
Размер314.31 Kb.
ТипУрок
odtdocs.ru > Философия > Урок
  1   2   3   4   5   6   7
Уроки ExtJS

http://goo.gl/YIKFj
Не думаю что я тут разверну серьезный учебный центр по этой интересной технологии, но все же попробую раскрыть несколько основополагающих моментов, чтобы стало понятно что это за зверь такой и с чем его едят. Основную инфу можно глянуть на оффсайте www.extjs.com , но особо я его не буду пропагандировать, как это делают многие, ибо своей целью поставил для себя раскрытие основных моментов, которые позволили бы, как я надеюсь, начинающему освоить данную технологию хотя бы на начальном уровне, чтобы мог самостоятельно и осознанно уже создавать свои веб-приложения.

Вообще данная библиотека кроссбраузерная и работает даже в IE6, тем не менее если вы не используете FireFox, но решите пройти мои уроки, настоятельно советую вам все же работать в FF, ибо будут тут фишки, которые заточены под FF.


Уроки ExtJS

Урок 1. Hello, world! 2

Урок 2. Окна 7

Урок 3. Окна, часть вторая 12

Урок 4. Окна, часть третья 15

Урок 5. Хранилища и таблицы 18

Урок 6. Шаблоны элементов 24



^

Урок 1. Hello, world!


Всякий учебник по программированию начинается с примера 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.

 



 

В перечне публичных свойств объекта MessageBox мы и видим что одно из них и указано как сокращеное наименование объекта.

 

На самом деле очень хочется надеяться что у вас имеется хорошее представление об ООП, ибо будет очень сложно с пониманием всех этих вложений объектов в объекты, а их уже в другие обэекты, и функций ихних, которые будут возвращать сами же себя и свои родительские объекты и свойства и т.п. Жуть в общем! Короче, буду дальше излагать как есть, и да не судите строго.

 

В общем, Изучая свойства и методы объекта Msg, мы находим тот метод, который мы вызывали в нашем примере, а именно alert.

 



 

Рассмотрим его внимательней

 

alert( String title, String msg, [Function fn], [Object scope] ) : Ext.MessageBox;

Что мы тут имеем?:

1) 2 обязательных параметра: title (Заголовок сообщения) , msg (собственно говоря само сообщение)

2) Необязательный параметр fn (пользовательская функция). Очень полезная штука! Тут в качестве параметра мы можем указать функцию, которая будет вызвана после закрытия сообщения, то есть при клике по кнопочке Ok сообщения. Синтаксис может быть двух видов:

а) название вызываемой функции. То есть если у вас объявлена ранее функция, к примеру callback() , то вы можете просто указать название функции, и она будет вызвана после закрытия сообщения. Вот пример:



 

Обратите внимание, что название функции, передаваемой в качестве параметра, вы должны указывать не в кавычках, потому что вы передаете именно объект, то есть саму функцию, а не строковый параемтр, и сказать "название функции" на самом деле было вообще не корректно в данном случае.

 

б) Scope. Очень полезный параметр. Тут в качестве параметра передается ссылка на целевой объект, который внутри функции будет виден в качестве this. Это может быть любой объект, в том числе и сам Ext.

 



 

А вот тут нужно разобрать очень важный момент: на самом деле мы пошли на маленькую хитрость и в качестве параметра для базовой функции 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.

 



 

Вот теперь у нас сообщение по ширине составляет 300 пикселей, ибо столько мы указали и окошко выглядит гораздо симпатичней. Однако в данном случае нам пришлось указать еще один параметр, который мы не указывали при использовании метода alert, это buttons: Ext.Msg.OK

Что же это такое? На самом деле догадаться не сложно, это кнопка, то чнее это может быть и несколько кнопок, если мы укажем другой тип, к примеру Ext.Msg.YESNOCANCEL , в результате чего у нас будет 3 кнопки (Yes, No и Cancel соответственно). Еще тут можно кучу всяких параметров указать, такие как значек (внимание, вопрос и т.п. , fn , scope и прочие). Вообще только объект Msg можно изучать пару дней, не говоря уже о всяких там Гридах и т.п. Но изучив как следует, вы получите очень мощный инструментарий для своих веб-разработок.

Вот продемонстрирую еще один пример. Его не сложно понять, внимательно изучив документацию. Очень настоятельно рекомендую это сделать, ибо если вы поймете каждый символ этого листинга, можно утверждать с огромной долей вероятности что освоение Экста у вас пойдет довольно сносно. Итак.

 



 

Вот такой на самом деле не простой получился первый урок. Те, кто дочитал до последних строк, достойны уважения за великое терпение как минимум ;-)

  1   2   3   4   5   6   7

Добавить документ в свой блог или на сайт

Похожие:

Fast education летние Каникулы за рубежом Лондон – Malaysia Нью Йорк 2013!
Уроки в закрытой группе! Уроки c 09: 00 утра до 12: 30 дня. Мероприятия с 13: 15 до 17: 00

Урок изучения и первичного закрепления новых знаний Используемое...
Диск Начальная школа. Уроки Кирилла и Мефодия 3 класс. Издательство ООО «Кирилл и Мефодий», 2009 г

Уроки танца живота

Уроки: математика 5-8 лет

План проведения Дня открытых дверей в гимназии №498 Открытые уроки

Уроки семьи и семейных ценностей
Совещание ( состояние работы по предупреждению детского дорожно-транспортного травматизма)

Федина задача
Вот и хорошо!- сказал Федя. По крайней мере, никто не будет мешать делать уроки

«Уроки семьи и семейных ценностей»
Тамбовское областное государственное образовательное автономное учреждение дополнительного профессионального образования

Федина задача
Вот и хорошо! сказал Федя. По крайней мере, никто не будет мешать делать уроки

Федина задача
Вот и хорошо! сказал Федя. По крайней мере, никто не будет мешать делать уроки

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница