extjs4 - is there a non json/xml writer for proxies? - extjs

I'm building some models to interact with an existing API from a previous project.
The API relies on standard POST methods to save the data.
I've configured a model and proxy up to the point where it does push the data onto the server but there only seems to be two writer types, json & xml.
proxy: {
/* ... */
reader: {
type: 'json',
root: 'results'
},
writer: {
type: '???' // <-- can only see json or xml in the docs
}
}
Isn't there a standard POST writer that simply submits data in post fields?
I'm surprised that wouldn't be a standard writer type.
(Parsing the json format wouldn't be too hard to implement but that would mean updating a lot of the old api files.)

Ok, I was able to create that writer quite easily by checking the existing writers' source code.
One thing those existing writers are able to do - and that may be why the dev team only implemented a json and xml version - is that they can push multiple records at once.
That could be implemented in POST but would be a bit more complicated.
This writer will work if you're trying to push a single model to an api using POST:
Ext.define('Ext.data.writer.SinglePost', {
extend: 'Ext.data.writer.Writer',
alternateClassName: 'Ext.data.SinglePostWriter',
alias: 'writer.singlepost',
writeRecords: function(request, data) {
request.params = data[0];
return request;
}
});
and the use this for the writer in the proxy:
writer: {
type: 'singlepost'
}

Based on Ben answer I've implemented my own writer that will collect all properties of all models into arrays.
For example if you have model like with some fields:
fields:[
{name:'id', type:'int'}
{name:'name', type:'string'}
{name:'age', type:'date'}
]
A request string will be
id=1&id=2&id=...&name=oleks&name=max&name=...&age=...
Code:
Ext.define('Ext.data.writer.SinglePost', {
extend: 'Ext.data.writer.Writer',
alternateClassName: 'Ext.data.SinglePostWriter',
alias: 'writer.singlepost',
writeRecords: function(request, data) {
if(data && data[0]){
var keys = [];
for(var key in data[0]){
keys.push(key);
}
for(var i=0;i<keys.length;i++){
request.params[keys[i]] = [];
for(var j=0;j<data.length;j++){
request.params[keys[i]].push((data[j])[keys[i]]);
}
}
}
return request;
}
});

For Sencha touch 2.0, change the writeRecords method to:
writeRecords: function (request, data) {
var params = request.getParams() || {};
Ext.apply(params, data[0]);
request.setParams(params);
return request;
}

Here's my version, adapted from answers above:
// Subclass the original XmlWriter
Ext.define('MyApp.utils.data.writer.XmlInAPostParameter', {
extend : 'Ext.data.writer.Xml',
// give it an alias to use in writer 'type' property
alias : 'writer.xml_in_a_post_parameter',
// override the original method
writeRecords : function(request, data) {
// call the overriden method - it will put the data that I
// want into request.xmlData
this.callParent(arguments);
// copy the data in request.xmlData. In this case the XML
// data will always be in the parameter called 'XML'
Ext.apply(request.params, {
XML: request.xmlData
});
// Already copied the request payload and will not send it,
// so we delete it from the request
delete request.xmlData;
// return the modified request object
return request;
}
});
Ext.define("MyApp.model.MyModel", {
extend : "Ext.data.Model",
requires : [
'MyApp.utils.data.writer.XmlInAPostParameter'
],
fields : [ 'field_A', 'field_B' ],
proxy : {
type : 'ajax',
api : {
read : '/mymodel/read.whatever',
update : '/mymodel/write.whatever'
},
reader : {
type : 'xml'
},
writer : {
// use the alias we registered before
type : 'xml_in_a_post_parameter'
}
}
});

Related

Sencha ExtJs: modify a store/model to handle records partially

I've got a combobox which is being filled in via http request. For this a JsonStore with proxy is used, and the model is defined as follows:
Ext.define('TreeModel', {
extend: 'Ext.data.Model',
fields: [
'field_1',
'field_2'
]
});
This worked perfectly fine with the following responses, provided I used rootProperty: 'data' in the reader:
{
"data":[{"field_1":1,"field_2":318},
{"field_1":2,"field_2":322}]
}
Now I am to add some database error handling by adding error description like:
{
"data": [{"field_1":1,"field_2":318},
{"field_1":2,"field_2":322}],
"error":{"code":"0","message":null}
}
, so thah I could do something like:
TreeStore.load({
callback: function(records, operation, success) {
App.checkServerReply(records[0].data.error);
}
});
Is there any way to modify the model or store or whatever so that it was either possible to obtain error description somewhat in the way shown and to continue filling in the combobox from the data array? Any other ideas to obtain the solution without modifying the response format?
In your method load you could do actually this:
TreeStore.load({
callback: function (records, operation, success) {
var data = Ext.JSON.decode(operation._response.responseText);
if (!Ext.isEmpty(data.error)) {
var error = data.error;
//do your stuff with error.code and error.message
}
}
});
Records[0] cannot contain your result because you don't send it as part of the first result record. In fact, you send it as metadata, but there are no well-defined and documented functions to access transmitted metadata (although I guess everyone sends it at some time).
In ExtJS 4.2.2, I am using the following:
store.load({
callback: function(records, operation, success) {
var rawData = store.getProxy().getReader().rawData;
//Ext.MessageBox.alert(rawData.Caption, rawData.Message);
App.checkServerReply(rawData.error);
}
});
Although not asked, I would like to point out that sencha allows you to use success and failure instead of callback, if you deliver a success flag from the server:
{
"success":true,
"data": [{"field_1":1,"field_2":318},
{"field_1":2,"field_2":322}],
"error":{"code":"0","message":null}
}

ExtJS Web Sockets: Ext.ux.WebSocket eventName error

I'm using the Ext.ux.data.proxy.WebSocket extension, and have the following store definition:
Ext.define('ExtMVC.store.StatsWebSocket', {
extend: 'Ext.data.Store',
alias: 'store.statswebsocket',
requires: [
'Ext.ux.data.proxy.WebSocket'
],
model: 'ExtMVC.model.Stock',
proxy: {
type: 'websocket',
storeId: 'StatsWebSocket',
url: 'ws://localhost:8087/ws',
reader: {
type: 'json',
root: 'cis4-file-stats'
}
}
});
Using Chrome debugger, I can see that the data is actually retrieved but somehow it doesn't end up in my Grid. The point where the store is used in the grid is shown below:
initComponent: function(){
var store = Ext.create('ExtMVC.store.StatsWebSocket');
Ext.apply(this, {
height: this.height,
store: store,
....
I've followed the instructions at [URL]https://market.sencha.com/extensions/ext-ux-data-proxy-websocket[/URL], but nothing seems to work. Any idea what I may be doing wrong? Thanks in advance.
Every time the browser receives data from the socket server, the error:
Uncaught Ext.ux.WebSocket.receiveEventMessage(): (No description provided)
is thrown.
The error occurs in this function of the Ext.ux.WebSocket extension:
fireEventArgs: function(eventName, args) {
eventName = eventName.toLowerCase(); // ERROR occurs here
var me = this,
events = me.events,
event = events && events[eventName],
ret = true;
if (event && me.hasListeners[eventName]) {
ret = me.continueFireEvent(eventName, args || emptyArray, event.bubble);
}
return ret;
}
Environment: ExtJS 4.1, Netty 3.5.0.Final.
FYI: I've also posted this question here.
UPDATE:
My question has been answered on the Sencha Forum by the developer of the extension, Wilky. In a nutshell, the JSON retured by the socket server must conform to a specific structure. It must have 'event' and 'data' nodes:
{"event": "read", "data": [{....}, {....}]}
"event" can be any of the CRUD methods; read, update, destroy or create. "data" corresponds to your application-specific data. All I needed to do was alter the structure of my JSON data.
I don't know if it has anything to do with your problem but I don't think the storeId definition inside
the proxy would work. Generally it should be defined as a config option of the store, but in your case you use it inside a proxy, which is defined in the store, so you don't need it at all.

how to call dynamically set proxy type in extjs4?

I am working in extjs4 MVC.I am going to stuck at a point where I am going to set dynamically proxy type to 'localstorage' where I am replacing my proxy type which is 'ajax' which is declared in model class.
When I want to store data at client side for that I am changing my model proxy type from ajax to locastorage.but when I am calling save() method on particular model object that data are going to server side not saved at client side.Plese give me some suggestion
1) Here is my model data class
Ext.define('Am.model.sn.UserModel',{
extend: 'Ext.data.Model',
fields: ['userId','firstName','middleName','lastName','languageId','primaryEmail','birthDate','password','securityQuestionId','securityQuestionAnswer','isMale','creationTime','ipAddress','confirmationCode','userStatusId',],
proxy:
{
type:'ajax',
api:
{
read:'index.php/SocialNetworking/user/AuthenticateLogin',
create:'index.php/SocialNetworking/user/AuthenticateLogin',
},//end of api
reader:
{
type:'json',
},//end of reader
writer:
{
type:'json',
root:'records',
},//End of writer
}//end of proxy
});
2) here is my some controller file code
Ext.define('Am.controller.sn.UserController',
{
extend:'Ext.app.Controller',
stores:['sn.UserStore','sn.SecurityquestionStore'],
models:['sn.UserModel','sn.SecurityquestionModel'],
views:['sn.user.Login','sn.user.Registration','sn.user.ForgetMyKey','sn.user.SecurityQuestion','sn.user.KpLogin'],
-----
----
init:function()
{
--------
}
remeberMe:function()
{
console.log("check box selected");
var email=this.getUserName().getValue();
var password=this.getPassword().getValue();
var objCheckBox=Ext.getCmp('checkbox');
if(objCheckBox.getValue()==true)
{
window.localStorage.clear();
//code for stoaring data at local storage
var modelObject = Ext.ModelManager.create(
{
primaryEmail:email,
password: password,
}, 'Balaee.model.sn.UserModel');
proxy=modelObject.getProxy();
//proxy=modelObject.getProxy();
proxy.type='localstorage';
//proxy.set(type,'localstorage');
proxy.id='rememberMe';
//proxy.set(id,'rememberMe');
//modelObject.setProxy(proxy);
//console.log("models proxyyyyyyyyyy="+modelObject.getProxy().type+""+modelObject.getProxy().id);
modelObject.setProxy(proxy);
//
I am also trying this but not work
//Ext.apply(proxy,{type:'localstorage',id:'remember' });
modelObject.save();
// code to hide login window
//var obj=Ext.ComponentQuery.query('#loginId');
//console.log("Object name = "+obj[0].id);
//obj[0].hide();
}//end of if statement
else
{
console.log("check box is not selected");
}//end of else statement
},//End of rememberMe function
});
please give me some suggestion.....
I created a sample code for a better understanding of switching proxxies.
//Defining model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{name: 'name', type: 'string'}]
});
//creation of ajax proxy
var ajaxProxy = new Ext.data.proxy.Ajax({
id: 'ajaxp',
reader: 'json'
});
//creation of local storage proxy
var lsProxy = new Ext.data.proxy.LocalStorage({
id: 'localp',
reader: 'json'
});
//Create instance of model
var user = Ext.create('User', {
name : 'Pravin Mane',
proxy: ajaxProxy //sets the ajax proxy
});
//Somewhere in your code
user.setProxy(lsProxy); //sets the localstorage proxy
You can set the proxy using the method setProxy(), defined on the Ext.data.Model.

Ext.data.proxy.Ajax and WCF services via JSON

I'm trying to make ExtJs work with backend running WCF RIA services with JSON endpoint enabled. The backend I have uses GetXXX for read data and CommitChanges for create/update/delete data. It also has not ExtJs standard message format, so I have store class defined like this:
function cloneObject(src, dst) {
for (var key in src)
{
dst[key] = src[key];
}
return dst;
}
Ext.define('MyApp.store.Items', {
extend: 'Ext.data.Store',
model: 'MyApp.model.Tax',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/GetItems',
update: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges',
create: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges',
destroy: '/MyApp/MyAppWeb-Web-MyAppDomain.svc/JSON/SubmitChanges'
},
reader: {
type: 'json',
root: 'GetItemsResult.RootResults',
successProperty: null,
totalProperty: 'GetItemsResult.TotalCount'
},
writer: {
type: 'json',
root: 'changeSet',
currentOperation: null,
getRecordData: function(record) {
var changeSet = [];
var entity = {
Id: 0,
Operation: 3,
Entity: {
__type: 'Items:#MyApp.Web'
},
OriginalEntity: {
__type: 'Items:#MyApp.Web'
}
};
cloneObject(record.data, entity.Entity);
cloneObject(record.raw, entity.OriginalEntity);
changeSet.push(entity);
return changeSet;
}
}
}
});
As you can in order to accomodate Microsoft JSON endpoint format I had to override getRecordData and create custom JSON object. I can probably replace cloneObject function with merge function, right? (I'm still kind of new to ExtJs, so may be I'm trying to "invent a bicycle" here.
It works more or less as expected for update, however for create and delete I need to create slightly different message format. Different Operation code and no need to send OriginalEntity. However inside getRecordData I don't have information about what kind of operation is being performed. So question #1
What is the best approach here? Override 'write' method as well or is there another way?
Question #2. After any update standard store class would call reader in order to parse response, but response for update is very different then response for GetItems and I have no idea how to handle that.
Any suggestions or links to walk-through on how to tie ExtJs and Domain Services?
I ended up re-writing Proxy class to add support for different parsing for read/write operations. Works pretty well. Let me know if somebody else faces same problems - I will post code samples.

ExtJS4 store proxy url override

I am trying to reuse a store by altering proxy url (actual endpoint rather than params). Is it possible to override proxy URL for a store instance wih the following syntax:
{
...some view config ...
store: Ext.create('MyApp.store.MyTasks',{proxy:{url:'task/my.json'}}),
}
if proxy is already well defined on the Store definition?
EDIT: AbstractStore source code sets proxy the following way
if (Ext.isString(proxy)) {
proxy = {
type: proxy
};
}
SOLUTION : store.getProxy().url = 'task/myMethod.json';
{
... some tab config ...
store: Ext.create('MyApp.store.MyTasks'),
listeners: {
afterrender: function(tab) {
tab.store.getProxy().url = 'task/myMethod.json'; //<--Saki magic :)
tab.store.load();
}
}
}
http://www.sencha.com/forum/showthread.php?149809-Reusing-Store-by-changing-Proxy-URL
You cannot override the url of a proxy alone when creating a store. You will have to pass a complete proxy. This is because, the library replaces the proxy as a whole! So, what you can do is:
{
...some view config ...
store: Ext.create('MyApp.store.MyTasks',{
proxy: {
type: 'ajax',
url : 'task/my.json',
reader: {
type: 'json',
root: 'rows'
}
}
}),
}
Now another possibility is, changing the end point after you have the instance of store. If you need to load the store from a different endpoint, you can make use of the load method.
store.load({url:'task/others.json'});
Since, in your case you are trying to re-use a store, you can pass the whole proxy. Your store's (MyApp.store.MyTasks) constructor should be capable of handling the new config and applying it to the store... Here is an example:
constructor: function(config) {
this.initConfig(config);
this.callParent();
}
Use the store.setProxy() method. Link here:
I have a BaseStore which I use to store default settings.
Ext.define('ATCOM.store.Shifts', {
extend : 'ATCOM.store.BaseStore',
model : 'ATCOM.model.Shift',
constructor : function(config) {
this.callParent([config]);
this.proxy.api = {
create : 'shifts/create.json',
read : 'shifts/read.json',
update : 'shifts/update.json',
destroy : 'shifts/delete.json',
};
}
});

Resources