Подход REST в ExtJS
- Опубликовано 19:21:08 11.12.2009
- Метки:
В этой статье я хочу рассмотреть как можно с помощью ExtJS реализовать редактирование данных используя принцип REST(сокр. англ. Representational State Transfer, «передача состояния представления»). Согласно REST сервер должен поддерживать всего четыре операции: GET, PUT, POST и DELETE. Все запросы будут адресоваться на один и тот же скрипт, а операции будут отличатся HTTP методом. За более подробной информацией можно обратится в википедию.
Для начало создадим прокси который будет отвечать за соединение с сервером и укажем в нем адрес по которому будет находится скрипт поддерживающий принцип REST на основе HTTP заголовков.
var proxy = new Ext.data.HttpProxy({
url: /rest.php/user
});
Так же нам понадобятся объекты которые будут читать наши данные и записывать. Это классы Ext.data.JsonWriter и Ext.data.JsonReader или Ext.data.XmlWriter и Ext.data.XmlReader в зависимости в каком формате будете передавать данные JSON или XML соответственно. Так как для javascript JSON родной формат рассмотрим именно его.
// Этот объект будет передавать данные на сервер
var writer = new Ext.data.JsonWriter({
encode: false // В документации сказано если вы будете использовать rest то этот флаг нужно выставить в false
});
// Этот объект будет принимать данные с сервера
var reader = new Ext.data.JsonReader({
totalProperty: 'total', // В переданных данных под этим именем должно быть общее количеств всех записей для реализации постраничной навигации
successProperty: 'success', // с данным именем будет флаг о успешности выполнения операции
idProperty: 'id', // имя primarykey поля
root: 'data' // Имя массива данных
},[
{name: 'id'},
{name: 'email', allowBlank: false},
{name: 'first', allowBlank: false},
{name: 'last', allowBlank: false}
]);
Осталось создать хранилище данных, передать в него наши объекты и указать его в качестве исходника в нашем гриде
var store = new Ext.data.Store({
restful: true, // Это наш волшебный флажок, который заставляет слать запросы на сервер при изменение данных в источнике
proxy: proxy,
writer: writer,
reader:reader
});
Теперь с этим источником данных можно совершать четыре основных действия и он будет слать соответствующие данные на сервер.
// Получить данные GET
store.load();
// Вставить новую запись POST
var u = new store.recordType({
first : 'Вася',
last: 'Петров',
email : 'vasa@petrom.com'
});
userGrid.store.insert(0, u);
// Изменить PUT
var u = store.getAt(0);
u.set('email','mail@mail.ru');
// Удалить DELETE
var u = store.getAt(0);
store.remove(u);
Настроим наш грид для приема и отображения наших данных. Для редактирования данных используем расширение Ext.ux.grid.RowEditor который позволяет редактировать всю строку разом.
var editor = Ext.ux.grid.RowEditor({
saveText: 'Сохранить',
cancelText: 'Отмена'
});
// Создадим структуру колонок нашей таблицы
var userColumns = [
{header: "ID", width: 40, sortable: true, dataIndex: 'id'},
{header: "Эл.почта", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({allowBlank: false})},
{header: "Имя", width: 50, sortable: true, dataIndex: 'first', editor: new Ext.form.TextField({allowBlank: false})},
{header: "Фамилия", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({allowBlank: false})}
];
Ext.onReady(function(){
// Теперь создадим нашу таблицу и настроим ее.
var userGrid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
iconCls: 'icon-grid',
frame: true,
title: 'Пользователи',
autoScroll: true,
height: 300,
store: store,
plugins: [editor], // Подключим плагин редактирования строки
columns : userColumns,
tbar: [{
text: 'Новый',
handler: function(){
// создадим нового пользователя
var u = new userGrid.store.recordType({
first : '',
last: '',
email : ''
});
editor.stopEditing(); // завершим редактирование если что то редактировалось
userGrid.store.insert(0, u); // Вставим его в первую строчку
editor.startEditing(0); // Начать редактирование первой строки
}
}, '-', {
text: 'Удалить',
handler: function(){
var rec = userGrid.getSelectionModel().getSelected(); // Получим выделенную запись
if (!rec) {
return false;
}
userGrid.store.remove(rec); // Удалим ее из хранилище
}
}, '-'],
viewConfig: {
forceFit: true
}
});
});
Как видите работа с гридом не чем не отличается от обычного способа. Останется только принять данные на стороне сервера. Как правильно принять данные на PHP и ответить я пожалуй расскажу в следующей раз.
Ну и конечно пока можно все понаблюдать на примере, в firebuge будут видны какие запросы уходят на сервер.
В примере пользовательские данные не сохраняю по известным причинам:)
Понравилась статья? Помогите блогу перейдите по рекламе, вам это ничего не будет стоить.
