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

Перевод документации 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-запрос быстро найти любой дочерний компонент.

 

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

 

 


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

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


Классическая анимация » Прыгающая подушка

Оборудование: Pentium-IV, Wacom Graphire3 CTE-630 Среда: Flash 8 Год: 2005   Первая и, видимо, последняя попытка нарисовать мини-мультфильм по т...


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

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


Демо на Ассемблере » Atomix

Размер: 2909 байт Требования: DOS 6.22, AdLib Sound Год: 1998   Интро для главной FIDO ноды Волгодонска N5062/1, долгое время я работал с ф...

RSS подписка

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


Как завязывать мужской шарф www.lorentino.ru.
Стоимость железобетонных колец: жби кольца классификация и стоимость slav-beton.ru.

Внимание!

На этом сайте разрабатывается программа 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
 Домик любопытного хомячка
Яндекс индекс цитирования
Почтовый ящик