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

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

Ext JS 4.2. Часть 3.5: Управление таблицей
29-09-2013
14:23:12

 

Управление таблицей

 

Обратите внимание, что функция onPanelRendered() до сих пор вызывается. Это присходит из-за того, что таблица с данными определяется как 'viewport > panel', а наш класс унаследован от Grid, который в свою очередь унаследован от Panel.

 

В настоящий момент вызываются функции обработки событий для всех объектов Panel и его потомков (все эти объекты являются дочерними объектами от Viewport). Давайте теперь переделаелаем обработку. Будем отлавливать события двойного клика по строке, что позволит нам далее сделать редактирование данных пользователя. Изменим контроллер Users следующим образом:

 

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

  views: [
   'user.List' // Представление списка пользователей
  ],

  init: function() {
    this.control({
      'userlist': {
        itemdblclick: this.editUser
      }
    });
  },

 

  // Обработка двойного клика на строке списка
  editUser: function(grid, record) {
    console.log('Двойной клик на пользователе ' + record.get('name'));
  }
});

 

В вышеприведенном коде мы изменили ComponentQuery-селектор с 'viewport > panel' на 'userlist'. Кроме того, теперь обрабатывается событие 'itemdblclick', которому назначается обработчик 'editUser'. Пока что просто происходит логирование в консоль отладки имени пользователя при двойном клике:

Логирование в консоль работает прекрасно, но нам-то нужно редактировать данные пользователя! Чтобы сделать это, необходимо создать новое представление с окном редактирования пользователя, которое нужно разместить в файле app/view/user/Edit.js:

 

Ext.define('AM.view.user.Edit', {
  extend: 'Ext.window.Window',
  alias: 'widget.useredit',

  title: 'Edit User',
  layout: 'fit',
  autoShow: true,

  initComponent: function() {
    this.items = [
      {
        xtype: 'form',
        items: [
          {
            xtype: 'textfield',
            name : 'name',
            fieldLabel: 'Name'
          },
          {
            xtype: 'textfield',
            name : 'email',
            fieldLabel: 'Email'
          }
        ]
      }
    ];

    this.buttons = [
      {
        text: 'Save',
        action: 'save'
      },
      {
        text: 'Cancel',
        scope: this,
        handler: this.close
      }
    ];

    this.callParent(arguments);
  }
});

 

И снова мы всего лишь создали подкласс от уже существующей компоненты Ext.window.Window. Нам пришлось использовать всего одну функцию initComponent(), в которой были прописаны элементы интерфейса и кнопки. Мы использовали стандартную схему размещения 'fit', которую можно рассматривать как один элемент, внутри которого размещены поля для редактирования имени пользователя и емейла. Так же мы создали две кнопки, одна из которых записывает внесенные изменения, а вторая просто закрывает окно.

 

Теперь нам достаточно добавить представление в контроллер, вызвать его отрисовку и загрузить в него данные пользователя:

 

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

  views: [
    'user.List', // Представление списка пользователей
    'user.Edit' // Представление окна редактирования пользователя
  ],

  init: ...

 

  // Обработка двойного клика на строке списка
  editUser: function(grid, record) {

    // Создается экземпляр представления для редактирования пользователя
    var view = Ext.widget('useredit');

 

    // В экземпляр представления подгружаются данные пользователя
    view.down('form').loadRecord(record);
  }
});

 

В обработчике двойного клика мы создаем экзепляр представления через удобный метод Ext.widget(), что эквивалентно вызову Ext.create('widget.useredit'). Потом мы используем ComponentQuery для быстрого получения ссылки на форму, размещенную в окне редактирования. Каждый компонент в Ext JS 4 имеет функцию down(), которая позволяет через ComponentQuery-запрос быстро найти любой дочерний компонент.

 

Сделаем двойной клик на какой-нибудь записи нашей таблицы и увидим что-то наподобе этого:

 

 



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

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


BASH » Cron Emulator

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


Скейтборд » Настоящая история скейтбординга. Часть 6: Как обстоят дела в России

Скейтбординг в нашей стране начал развиваться в начале 80-х годов. Советская промышленность в больших объемах выпускала скейты со слаломными подвескам...


Mplayer / Mencoder » Как усилить резкость и убрать квадраты при воспроизведении через Mplayer

Бывает так, что фильм требует небольшого повышения резкости при просмотре. Заодно, нужно сгладить квадраты, которые видны из-за сжатия с потерей качес...

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

База Adgaver (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)

База Pipitos1983

База Soxsten

База Silenn

База Shlyapnikova - херомантия и ригидность

База Svoynickname

База Larson227

База Velonski

База BrokeRU

База Mcold

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

База RuDennn

База Manakaden

База Vitvrn

База Fanrok

 

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

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