CODEWITHSUNDEEP
ajaxsencha-touch
urk
urk

Reputation: 31

Removing records from a store using an AJAX proxy in Sencha Touch 1.1

I don't know how to detect whether an AJAX proxy generated HTTP request is an insert/update or a delete operation.

These are my data (simpsons.json):

[
    {
        "id": 1,
        "firstName": "Homer"
    },
    {
        "id": 2,
        "firstName": "Marge"
    },
    {
        "id": 3,
        "firstName": "Bart"
    },
    {
        "id": 4,
        "firstName": "Lisa"
    }
]

This is my Sencha Touch 1.1 code:

Character = Ext.regModel('Character', {
    fields: [
        {name: 'id', type: 'int'},
        {name: 'firstName', type: 'string'}
    ]
});

SimpsonsStore = new Ext.data.Store({
    model: 'Character',
    proxy: {
        type: 'rest',
        url: 'simpsons.json'
    },
    autoLoad: true
});

SimpsonsStore.on('load', function(store, records, success) {

    // add record
    store.add({id: 5, firstName: 'Maggie'});

    // update record
    var margeRecord = store.findRecord('firstName', 'Marge');
    margeRecord.set('firstName', 'Marjorie');

    // delete record
    var homerRecord = store.findRecord('firstName', 'Homer');
    store.remove(homerRecord);

    // sync store
    store.sync();
});

Running this code generates these HTTP requests:

POST /simpsons.json/5?_dc=1321377134028 HTTP/1.1

{"records":[{"id":5,"firstName":"Maggie"}]}

.

PUT /simpsons.json/2?_dc=1321377142625 HTTP/1.1

{"records":[{"id":2,"firstName":"Marjorie"}]}

.

DELETE /simpsons.json/1?_dc=1321377148457 HTTP/1.1

{"records":[{"id":1,"firstName":"Homer"}]}

Like it, each operation has its own HTTP request method (verb).

When I change the proxy type from "rest" to "ajax" the generated HTTP requests look like these:

POST /simpsons.json?_dc=1321376787918 HTTP/1.1

{"records":[{"id":5,"firstName":"Maggie"}]}

.

POST /simpsons.json?_dc=1321376792207 HTTP/1.1

{"records":[{"id":2,"firstName":"Marjorie"}]}

.

POST /simpsons.json?_dc=1321376798158 HTTP/1.1

{"records":[{"id":1,"firstName":"Homer"}]}

As you can see these look very similar. This is not an issue for insert or update operations. But how can the backend detect that the last HTTP request is neither an insert nor an update but a delete action?

I found an "api" config option in Sencha Touch 2.0 as it exists in Ext JS 4, but I didn't find a way to define different URLs or parameters for the particular actions of an AJAX proxy in Sencha Touch 1.1.

Any help appreciated.

Thanks,

Uwe

Upvotes: 3

Views: 3012

Answers (2)

Daniel
Daniel

Reputation: 1422

The actionMethods property of the AjaxProxy is set by default to 

{create: "POST", read: "GET", update: "POST", destroy: "POST"}

You can simply overwrite it:

store.getProxy().actionMethods = {
    create: "POST",
    read: "GET",
    update: "PUT",
    destroy: "DELETE"
};

Upvotes: 2

ilija139
ilija139

Reputation: 2974

Go here http://docs.sencha.com/touch/1-1/#!/api/Ext.data.AjaxProxy scroll down to Url generation, and read about the Ext.data.Operation objects and how to use them.

Upvotes: 2

Related Questions