All geek questions in one place

Cross-domain upgrade from Sencha Touch 2 to an external server

An attempt to create a synchronization of Sencha-Touch-2 applications with the Node.js server; code below. The server uses a different port on the same IP address, so this is cross-domain. (The server uses Mongoose to communicate with MongoDB content (not shown))

I read this forum elsewhere for a couple of days, but it seems I'm stuck. Any help would be greatly appreciated.

Node.js and restore the 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' } ...

Score

 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); }, ...
+4
source share
1 answer

In Sencha-Touch-2 applications, the browser prohibits AJAX internetwork calls (which violate a security policy of the same origin). This applies to different domains, different IP addresses, and even different ports on the same IP address. JSONP circumvents this in part by inputting / reading data encapsulated in a script tag in a recently triggered HTTP GET message. Thus, the Sencha-Touch-2 JSONP proxy server can load storage (fetch / read) from the server (cross-domain). However, the JSONP proxy cannot write data. 1 and 2 describe the approach that I adapted.

My solution uses a JSONP proxy to retrieve data, but not for storage (which it cannot). Instead, new entries and entries that need to be saved or deleted are transmitted with the server in a new initiated HTTP GET message. Although only HTTP GET is used, the server accepts a get message (described in the question above), put , del and new . get used by the JSONP / proxy load() repository.

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 },
+2
source

Source: https://habr.com/ru/post/1435730/

More articles:


All Articles