Собираем
информацию
по крупицам
Статьи - Компьютерное

Перевод документации 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().


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

 

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

 

 


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

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


Программирование на C++ и Qt » Qt: как бороться с ошибкой "Point size <= 0 (0), must be greater than 0"

Многие, кто делает программы на фреймверке Qt 4.x, может натолкнутся на то, что запущенная программа в какой-то момент начинает сыпать бесконечными пр...


Перевод документации Ext JS 4.2 » Ext JS 4.2. Часть 2: Система классов

  Впервые в истории разработки Ext JS был проведен широкий рефакторинг, в результате которого была полностью переписана система классов. Новая ар...


Игры под DOS » Udav (Удав)

Игра, написанная за одну ночь для тренировки работы с компилятором Borland C/C++. Как говорится, классика жанра - PC Speaker + TextMode, управление с...

RSS подписка

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

Поделиться этой страницей


Статистика


О, смотри-ка какое хорошее место. Дайте два!

Внимание!


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

 

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

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

База Fadk

 

Требуют доработки:

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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