4

Trying to create a Sencha-Touch-2 app syncing to a Node.js server; code below. The server uses another port on the same IP, so this is cross-domain. (The server uses Mongoose to talk to a MongoDB back-end (not shown))

I've been reading this forum and elsewhere for a couple of days, but I seem to be stuck. Any help would be much appreciated.

Node.js and restify server

var server = restify.createServer({
  name: 'Server',
  key: fs.readFileSync(root+'/'+'privatekey.pem'),
  certificate: fs.readFileSync(root+'/'+'certificate.pem')
});

server.use(restify.bodyParser());
server.use(restify.queryParser());

function getMessages(req, res, next) {
  Model.find(function (err,data) {
    res.setHeader('Content-Type', 'text/javascript;charset=UTF-8');
    res.send(req.query["callback"] + '({"records":' +  JSON.stringify(data) + '});');
  });
}

function postMessage(req, res, next) {//not yet tested
  var obj = new Model(); 
  obj.name = req.params.name;
  obj.description = req.params.description;
  obj.date = new Date();
  obj.save(function (err) {
        if (err) throw err;
        console.log('Saved.');
        res.send('Saved.');
  });
}

server.post(/^\/atapp/, postMessage);
server.get(/^\/atapp/, getMessages);

server.listen(port, ipaddr, function() {
    console.log('%s: secure Node server started on %s:%d ...', Date(Date.now()), ipaddr, port);
});

Sencha Touch 2

Model

Ext.define('ATApp.model.User', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            { name: 'name',  type: 'string' },
            { name: 'description', type: 'string' },
            { name: 'date',  type: 'date' },
            { name: '_id' }
...

Store

Ext.define('ATApp.store.Data', {
    extend: 'Ext.data.Store',
    requires: [
        'ATApp.model.User',
        'Ext.data.proxy.JsonP'
    ],
    config: {
        autoLoad: true,
        model: 'ATApp.model.User',
        storeId: 'Data',
        proxy: {
            type: 'jsonp',  
            model: 'ATApp.model.User',
            url: 'https://192.168.2.45:13017/atapp',
            reader: {
                type: 'json',
                idProperty: '_id',
                rootProperty: 'records',
                useSimpleAccessors: true
            },
            writer: {
                type: 'json',
                allowSingle: false,
                encode: true,
                idProperty: '_id',
                rootProperty: 'records'
...

Controller

onNewDataRecord: function (view) {
                        console.log('newDataRecord');
                        var now = new Date();
                        var record = Ext.create('ATApp.model.User', {
                            date: now,
                            name: '..',
                            description: '..'
                            });
                        var store = Ext.data.StoreManager.lookup('Data')
                        record.setProxy(store.getProxy());
                        store.add(record);
                        this.activateEditor(record);
                    },
...

1 Answer 1

2

In Sencha-Touch-2 apps, the browser prohibits cross-domain AJAX calls (which violate the same-origin security policy). This pertains to different domains, different IP addresses and even different ports on the same IP address. JSONP circumvents this partly by fetching/reading data encapsulated in a script tag in a newly initiated HTTP GET message. In this way the Sencha-Touch-2 JSONP proxy can load a store (fetch/read) from a (cross domain) server. However, the JSONP proxy cannot write data. In 1 and 2 an approach is described which I have adapted.

My solution uses the JSONP proxy to fetch data, but not to store (which it can't). Instead, new records, and records to be saved or deleted are communicated with the server in a newly initiated HTTP GET message. Even though only HTTP GET is used, the server accepts message get (described in the question, above), put, del and new. Get is used by JSONP store/proxy load().

Node.js Server

//routes
server.get(/^\/atapp\/put/, putMessage);
server.get(/^\/atapp\/get/, getMessages);
server.get(/^\/atapp\/del/, delMessage);
server.get(/^\/atapp\/new/, newMessage);

function newMessage(req, res, next) {    
    var obj = new Model();                  // Mongoose create new MongoDB object
    obj.save(function (err,data) {
        var x = err || data;
        res.setHeader('Content-Type', 'text/javascript;charset=UTF-8');
        res.send(req.query["callback"] + '({"payload":' +  JSON.stringify(x) + '});');
    });                                     // send reply to Sencha-Touch 2 callback
}

function putMessage(req, res, next) {    
    var q = JSON.parse(req.query.data);     // no reply: add error recovery separately
    var obj = Model.findByIdAndUpdate(q.key,q.val);  
}

function delMessage(req, res, next) {
    var key = JSON.parse(req.query.data);
    Model.findByIdAndRemove(key);       // no reply: add error recovery separately
}

Sencha Controller

New

onNewDataRecord: function (view) {
    var control = this;
    Ext.Ajax.Crossdomain.request({
        url: 'https://192.168.2.45:13017/atapp/new',
        rootProperty: 'payload',
        scriptTag: true, // see [1](http://code.google.com/p/extjsdyntran/source/browse/trunk/extjsdyntran/WebContent/js/3rdparty/Ext.lib.Ajax.js?r=203)
        success: function(r) { // process synchronously after response
            var obj = r.payload;
            var store = Ext.data.StoreManager.lookup('Data');
            var key = obj._id // MongoDB document id
            store.load(function(records, operation, success) { // add new record to store
                            var ind = store.findBy(function(rec,id) {
                                                return rec.raw._id==key;
                                            }); // identify record in store
                            var record = store.getAt(ind);
                            control.onEditDataRecord(view,record);
                        }, this);
        }
    });

Save

onSaveDataRecord: function (view, record) {
    rec = {key:record.data.id, val: {}} // save template
    var i; for (i in record.modified) rec.val[i]=record.data[i];
    var delta = Ext.encode(rec); // only save modified fields
    Ext.Ajax.Crossdomain.request({
        url: 'https://192.168.2.45:13017/atapp/put',
        params: {
            data: delta,
        },
        rootProperty: 'payload',
        scriptTag: true, // Use script tag transport
    });
},

Delete

onDelDataRecord: function (view, record) {
    var key = record.data.id;
    Ext.Ajax.Crossdomain.request({ // delete document in db
        url: 'https://192.168.2.45:13017/atapp/del',
        params: {
            data: Ext.encode(key),
            format: 'json'
        },
        rootProperty: 'payload',
        scriptTag: true, // Use script tag transport
    });
    record.destroy(); // delete record from store
},

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.