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

Перевод документации 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', и был произведен клик по кнопке сохранения:

 

 


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

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


Web - разработка » Как настроить горячие клавиши для переключение вкладок в Firefox

Традиционно, в браузере Firefox для переключения вкладок используются следующие комбинации клавиш: Ctrl+Tab - перейти на следующую (правую) вкладку; ...


C / C++ » LoLo Switcher. Полное руководство по конфигурированию

Это полное руководство к переключателю клавиатуры LoLo Switcher для оконной среды X11. Скачать переключатель можно на официальной странице LoLo S...


Игры под DOS » Twins (Близнецы)

Игра написана с использованием компилятора Borland Pascal 7. Смысл игры - открыть все ячейки на игровом поле. Ячейки остаются открытыми только в том ...

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

 

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

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