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

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


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

 

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

 

 


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

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


ПЭВМ "Микроша" » Комплект программ "Редактор и Ассемблер" для ПЭВМ "Микроша"

Часть документации на ПЭВМ "Микроша" с описанием работы текстового редактора и транслятора ассемблера. Данный комплект программ занимал 4Кб: 2Кб уходи...


Web - разработка » Как в CodeIgniter 1.7.x исправить баг при загрузке файлов (класс Upload)

Фреймверк CodeIgniter - замечательная вещь для небольших проектов. И хотя недавно уже вышел предварительный релиз 2.0, многие предпочитают пользоватьс...


Интерфейс и юзабилити » Оформление кода: Почему я выбрал для себя отступ в 2 пробела?

В мире программирования существует достаточно холиварная тема: "Каким должен быть отступ в коде"?   Оставим за бортом споры по теме "Форматироват...

RSS подписка

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


http://www.instyle63.ru/ женское деловое платье купить.
Смотрите описание гравицапа здесь.

Внимание!


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

 

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

База Rarrugas (1, 2)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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