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

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

Ext JS 4.2. Часть 3.7: Сохранение данных в Модели данных
29-09-2013
14:26:16

 

 

Сохранение данных в Модели данных

 

В настоящий момент мы имеем таблицу с данными пользователя и окно, которое открывается при двойном клике по строке таблицы. Теперь нам необходимо записывать производимые в интерфейсе изменения данных. Окно редактирования содержит форму с полями, содержащими имя и е-майл, и кнопку сохранения. Для начала давайте изменим контроллер так, чтобы в его функции инициализации была прописана обработка клика по кнопке сохранения:

 

Ext.define('AM.controller.Users', {
  ...
  init: function() {
    this.control({
      'viewport > userlist': {
        itemdblclick: this.editUser
      },
      'useredit button[action=save]': {
        click: this.updateUser
      }
    });
  },

  ...

  updateUser: function(button) {
    console.log('Клик по кнопке сохранения');
  }
  ...
});

 

Мы добавили второй ComponentQuery-селектор 'useredit button[action=save]' в вызов this.control(). Он работает так же как и первый селектор - он использует xtype 'useredit' с помощью которого устанавливается фокус на окно редактирования, а потом в найденном элементе ищется любая кнопка с действием "save". Когда мы определяли окно редактирования данных пользователя, мы указали {action: 'save'} для кнопки сохранения, благодаря чему мы можем найти путь к этой кнопке вышеуказанным способом.

 

Мы можем удостовериться, что функция updateUser() вызывается при клике на кнопку сохранения:

 

Теперь мы имеем обработчик updateUser(), который срабатывает на событие клика по кнопке сохранения. Давайте заполним его реальной логикой. В этой функции нам нужно получить данные из формы, обновить ими модель User и записать обратно в хранилище данных Users. Давайте посмотрим как это делается:

 

updateUser: function(button) {
  var win = button.up('window'),
    form = win.down('form'),
    record = form.getRecord(),
    values = form.getValues();

  record.set(values);


  win.close();
}

 

Разберемся что здесь происходит. Обработчик события клика по кнопке updateUser() получил в качестве параметра ссылку на кнопку button. Но нам нужно работать не с кнопкой, а с данными, которые находятся внутри формы, раположенной в том же окне что и кнопка. Чтобы получить данные из формы, мы вначале получаем ссылку на окно редактирования с помощью вызова button.up('window'). Этот вызов запускает поиск объекта 'window' вверх по иерархии относительно базового объекта button. Затем мы используем поиск вниз win.down('form') чтобы получить ссылку на форму с данными.

 

Далее мы просто выбираем запись, которая была загружена в форму, и обновляем запись согласно данным, которые были введены в форме. В конце обработчика мы закрываем окно редактирования, чтобы пользователь автоматически вернулся к таблице с данными. На следующем рисунке представлено состояние окна после того, как было запущено приложение, изменено имя пользователя на 'Ed Spencer', и был произведен клик по кнопке сохранения:

 

 


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

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


Linux: как перестать удивляться, и начать работать » Как в Linux следить за температурой видеокарты и выводить предупреждения

В этой статье мы будем решать аппаратные проблемы программными средствами с привлечением человеческого ресурса.   Итак, проблема. Через год испол...


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

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


Мультиплатформенные игры » Ежик-попрыгунчик. Лесная тропа.

Игра про ёжика, который прыгает по подвижным платформам и собирает яблочки.   Эта игра писалась в рамках конкурса конференции разработчиков игр ...

RSS подписка

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


Родина против государства официальный сайт "РОДИНА Гранд отель и СПА".
Смотрите описание психология отношений между мужчиной и мужчиной у нас.

Внимание!


На этом сайте разрабатывается программа 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

База Anatolean

База Аrmagedec

База SorokinRed

База Deadelf79

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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