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

RSS подписка

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

Статьи - Компьютерное

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

 

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

 

 



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

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



Внимание!


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

 

База Xintrea (стр. 1)

База Rarrugas (стр. 1)

База Balas

База YellowRaven

База Yurons

База Lesnik757

База Shandor

База Sirrichar

База Anatolean (стр. 1)

База Аrmagedec

База SorokinRed

База Deadelf79

База Adgaver (стр. 1)

База Pipitos1983

База Soxsten (стр. 1)

База Silenn (стр. 1)

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

База Svoynickname (стр. 1)

База Larson227 (стр. 1)

База Velonski (стр. 1)

База BrokeRU (стр. 1)

База Mcold (стр. 1)

База Alensav (стр. 1)

База Consp11 (стр. 1)

База Kozlov-AE (стр. 1)

База Wwwlir (стр. 1)

База Duwaz (стр. 1)

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База RuDennn (Bunny-Hop)

База Manakaden

База Vitvrn

База Fanrok

База Grimar

База_Juryak

База Nicolasomsk

База Azatserikbaev

База Shut913

 

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

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