Собираем
информацию
по крупицам

Перевод документации Ext JS 4.2

Ext JS 4.2. Часть 3.3: Определение контроллера
29-09-2013
14:20:44

 

Определение контроллера

 

Контроллеры - это тот клей, который связывает все части веб-приложения воедино. Контроллеры отлавливают возникновения событий (чаще всего событий, возникающих в представлениях) и выполняют множество других действий. Давайте создадим контроллер Users для нашего приложения. Создадим файл /app/controller/Users.js и добавим в него следующий код:

 

Ext.define('AM.controller.Users', {
   extend: 'Ext.app.Controller',

   init: function() {
     console.log('Инициализация пользователей. Этот код срабатывает перед тем, как будет вызвана функция launch(), запускающая код основного приложения.');
   }
});

 

Далее надо добавить этот контроллер в конфигурацию веб-приложения в файле app.js:

 

Ext.application({
...
   controllers: [
     'Users'
   ],
...
});

 

 

Когда в браузер загружается центральный файл веб-приложения index.html, контроллер Users будет подгружен автоматически (так как мы его прописали в конфигурации нашего приложения), и его функция инициализации будет вызвана перед launch-функцией основного приложения.

 

Функция инициализации init() - это прекрасное место чтобы прописать, каким образом контроллер будет взаимодействовать с представлением, и обычно используется совместно с еще одной функцией контроллера - control(). Функция control() позволяет отлавливать события, возникающие в классах представлений и назначать им функции обработки. Давайте изменим код контроллер Users так, чтобы отловить момент отрисовки панели:

 

Ext.define('AM.controller.Users', {
   extend: 'Ext.app.Controller',

   init: function() {
     this.control({
       'viewport > panel': {
         render: this.onPanelRendered
       }
     });
   },

   onPanelRendered: function() {

     // Сообщение появляется при отрисовке панели
     console.log('The panel was rendered');
   }
});

 

 

Мы изменили функцию init() так, чтобы через вызов this.control() был установлен обработчик событий, срабатывающий при отрисовке панели. Функция control() использует подсистему ComponentQuery для доступа к любому компоненту на странице. Если вы не знакомы с ComponentQuery, обратитесь к документации, чтобы научиться полноценно работать с ней. Кратко говоря, эта подсистема позволяет обращаться к компонентам страницы посредством CSS-подобных селекторов.

 

В нашей функции init() мы использовали селектор 'viewport > panel', что означает "найти каждый элемент Panel, который является прямым потомком элемента Viewport". А так же мы привязали события, возникающие в найденных объектах (в нашем случае это события отрисовки, т. к. мы задали опцию render:) к функции-обработчику onPanelRendered(). В результате, каждый раз, когда будет совершаться событие отрисовки в элементах, подходящих под указанный нами селектор, будет вызываться функция onPanelRendered().


Когда мы запустим приложение, мы увидим следующее:

 

Продемонтрированный пример кода весьма далек от того, что пишется на практике, но он показывает насколько легко можно правильно организовать проект. Давайте теперь усложним наше приложение и добавим на экранную форму таблицу с данными.

 

 


К списку "Компьютерное"

Интересное на сайте


BASH » Cron Emulator

Многие системные администраторы Linux часто сталкиваются с одной и той же проблемой: при попытке запуска команды из-под демона Cron, она ведет себя не...


Демо, сделанное в генераторе » Xintrea Home Page Demo

Размер: 250 Кбайт Требования: Windows 95/98/XP Год: 2005   Демка для моего старого сайта xi.net.ru. Демка сделана просто щелчками мышки, с ...


Mplayer / Mencoder » Как изменить размер изображения (масштабирование при кодировании видеопотока)

Часто возникает потребность изменить размер изображения у фильма. Причин может быть много: уменьшение размера файла, уменьшение нагрузки на процессор ...

RSS подписка

Подпишитесь на новости сайта по RSS


http://www.instyle63.ru/ женское деловое платье купить.
Изображения с меткой скинали для кухни каталог изображений "Glass Printing".

Внимание!

На этом сайте разрабатывается программа MyTetra и её родственные проекты.

Доступны к просмотру следующие базы знаний:

База Xintrea (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18)

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

 

Подробности на странице MyTetra Share.

 WebHamster.Ru
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик