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

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

Ext JS 4.2. Часть 3.8: Запись данных на сервер
29-09-2013
14:28:39

 

Запись данных на сервер

 

Все достаточно просто. Нам нужно сохранять на сервер изменения, сделанные в интерактивном режиме на стороне браузера. Пока что мы просто захардкодили две пользовательские записи прямо в коде хранилища данных /app/store/Users.js. Вместо этого, для начала, нужно сделать чтение данных с сервера через AJAX:

 

Ext.define('AM.store.Users', {
  extend: 'Ext.data.Store',
  model: 'AM.model.User',
  autoLoad: true,

  proxy: {
    type: 'ajax',
    url: 'data/users.json',
    reader: {
      type: 'json',
      root: 'users',
      successProperty: 'success'
    }
  }
});

 

В этом коде мы удалили свойство 'data', и вместо него добавили свойство 'proxy'. Прокси - это объект, с помощью которого в Ext JS 4 происходит чтение и запись в хранилище данных (Store) или модель (Model). Прокси-объекты могут работать по протоколам AJAX, JSON-P, HTML5 localStorage и всем прочим. Здесь мы используем AJAX-прокси (опция type: 'ajax'), который считывает данные с URL-а 'data/users.json'.

 

Мы так же проинициализировали в прокси считыватель данных reader. Считыватель отвечает за обработку ответа от сервера, и представляет полученные данные в формате, понятном хранилищу. В нашем случае мы используем считыватель формата JSON (опция type: 'json') и задаем ему конфигурирующие опции root и successProperty.

 

И, наконец, создаем файл /data/users.json , в котором размещаем исходные данные в формате JSON:

 

{
  "success": true,
  "users": [
    {"id": 1, "name": 'Ed', "email": "ed@sencha.com"},
    {"id": 2, "name": 'Tommy', "email": "tommy@sencha.com"}
  ]
}

 

Когда мы в последний раз изменяли код хранилища /app/store/Users.js, мы задали свойство autoLoad равным true. Благодаря этому, хранилище будет сразу же запрашивать данные от прокси-объекта. Если мы обновим страницу, мы увидим все те же данные что и раньше, но теперь они не захардкорены в коде приложения, а берутся с сервера.

 

И последнее, что мы должны сделать - это отправить измененные данные обратно на сервер. В нашем примере мы просто используем статические JSON-файлы на стороне сервера, не используем базу данных и серверные скрипты. Поэтому мы не можем сохранить измененные данные. Но мы можем проверить передаваемые браузером данные в отладочной консоли.

 

Для этого в прокси-объекте необходимо внести изменения, чтобы он знал куда и как отправлять измененные данные. Для этого добавим опцию api, в которой пропишем URL записи update: 'data/updateUsers.json', а заодно избавимся от опции url в самом прокси объекте, и вместо нее запишем URL чтения read: 'data/users.json' в опцию api:

 

proxy: {
  type: 'ajax',
  api: {
    read: 'data/users.json',
    update: 'data/updateUsers.json'
  },
  reader: {
    type: 'json',
    root: 'users',
    successProperty: 'success'
  }
}

 

Мы читаем данные из users.json, а обновления отправляем в updateUsers.json. Не забывайте, что мы сейчас никак не сохраняем передаваемые на сервер данные. Однако нам нужно съэмулировать ответ сервера, что данные успешно получены. Для этого в файл updateUsers.json надо прописать строку {"success": true}. Его содержимое будет получено браузером в ответ на HTTP POST запрос, и это поможет избежать ошибки 404.

 

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

 

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

  record.set(values);
  win.close();

  // Синхронизация хранилища после редактирования записи
  this.getUsersStore().sync();
}

 

Теперь мы можем запустить наш полный пример и убедиться, что все работает как полагается. Мы редактируем запись, нажимаем кнопку сохранения (Save), и видим, что запрос с измененными данными корректно отправляется на сервер:

 

Заключение

 

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

 

Исходники данного приложения доступны в Ext JS 4 SDK, и расположены в каталоге /examples/app/simple.

 

 


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

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


Web - разработка » Работа базы SQLite 3 в CodeIgniter 2

В популярном веб-фреймверке CodeIgniter с поддержкой БД в формате SQLite 3 всё не слава богу. В устаревшем CodeIgniter (версии 1.7.x) ситуация была на...


Web - разработка » Как сделать ввод и отображение HTML/XML кода в TinyMCE

Многие, кто пытается пользоваться редактором TinyMCE в своих проектах, быстро замечают одну неприятную особенность.К примеру, вы - веб-разработчик или...


ПЭВМ "Микроша" » Комплект программ "Редактор и Ассемблер" для ПЭВМ "Микроша"

Часть документации на ПЭВМ "Микроша" с описанием работы текстового редактора и транслятора ассемблера. Данный комплект программ занимал 4Кб: 2Кб уходи...

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

База Fadk

 

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

 

База Tairesh

База Ivnglkv

База Kolyag87

База Andyk101

База Garik456456

База Harpokrat

База SalexIzyh

База Duwaz

 

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

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