Подход REST в ExtJS

В этой статье я хочу рассмотреть как можно с помощью 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 будут видны какие запросы уходят на сервер.

В примере пользовательские данные не сохраняю по известным причинам:)

Понравилась статья? Помогите блогу перейдите по рекламе, вам это ничего не будет стоить.

Комментарии.

Написать комментарий