How to access extra parameters in json file in extjs4? - json

i am working in extjs4 MVC plus yii framework.I am getting stuck at a point which is how to access extra parameters in jason file coming from server and handle it to client side in extjs4.
My code:-
1) My json file is:--
{
'users': [
{
"userId": 1,
"userName": 'Who will win the series11111111?',
"message":"You are welcome",
}
]
}
2) My userModel class in extjs4 :--
In this file there is no any 'message' attribute available.
Ext.define('Balaee.model.sn.UserModel',{
extend: 'Ext.data.Model',
fields: ['userId','userName','password'],
proxy:
{
type:'ajax',
api:
{
read:'http://localhost/balaee/Balaee/index.php?r=SocialNetworking/user/AuthenticateLogin',
create:'http://localhost/balaee/Balaee/index.php?r=SocialNetworking/user/AuthenticateLogin',
},//end of api
reader:
{
type:'json',
root:'users'
},//end of reader
writer:
{
type:'json',
root:'records',
},//End of writer
}//end of proxy
});
3)And here is my view file where I am going to access userName and message fields coming from json file.
Ext.define('Balaee.view...',
{
extend:'Ext.view.View',
store:'kp.UserStore',
config:
{
tpl:'<tpl for=".">'+
'<div id="main">'+
'</br>'+
'<b>userName :-</b> {userName}</br>'+
'<b>message :-</b> {message}</br>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});// End of login class
But its not working.It display userName field value but not displaying message field value.
Actually I want to access a message field which is not persent in model class in extjs4. Is it correct to access to this type of fields having no any relationship? How can I access this type of fields. Please give me some suggestions.

An Ext.data.Model only knows about the fields it has defined. This is clear from the examples in the documentation.
If you want message to be available to your view, it must also be available from your model:
Ext.define('Balaee.model.sn.UserModel',{
extend: 'Ext.data.Model',
fields: ['userId', 'userName', 'password', 'message'],
// ...
});

Related

Sencha/Extjs rest call with all parameters

I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields.
When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server.
The call made by the proxy are two, first is OPTIONS call to know which method are allowed, second call is a PUT.
My problem is PUT json contains only the changed attributes.
I would like that my application sends all the attributes in PUT, instead only the changed subset.
Is this a proxy configuration, or should I use another kind of proxy, like ajax?
Some code snippet:
Model:
Ext.define('myApp.model.CvModel', {
extend: 'Ext.data.Model',
alias: 'viewmodel.cv',
idProperty : 'code',
proxy: {
type: 'rest',
url: 'http://localhost:8080/CV/resource/rest/cvs/CodeSystem/Domain',
paramsAsJson: true,
reader: {
type: 'json',
rootProperty: 'Test_data'
}
},
fields: [{
...
Controller:
onSave: function () {
var selCv = this.getViewModel().get('selectedCv');
selCv.save();
....
You need to specify a writer config on your proxy with writeAllFields: true. By default it's false, and the default writer itself is just {type: 'json'}.

Getting Type Error when using Ember Embedded Records Mixin with keyForAttribute

I've been banging my head against deserializing data with Ember. I feel like I've set it up right but I keep getting the same error. I'm trying to use the EmbeddedRecords Mixin, but it simply hasn't worked for me. Below is my debug data.
DEBUG: Ember : 1.6.1
DEBUG: Ember Data : 1.0.0-beta.7+canary.b45e23ba
DEBUG: Handlebars : 1.3.0
DEBUG: jQuery : 1.10.2
DEBUG: Model Fragments : 0.2.2
Here is a simple setup of what I've been doing. I have my model defined like this -
App.Subject = DS.Model.extend({
title: DS.attr('string'),
sections: DS.hasMany('section')
});
App.Section = DS.Model.extend({
title: DS.attr('string'),
subject: DS.belongsTo('subject')
});
App.SubjectSerializer = DS.RESTSerializer.extend(DS.EmbeddedRecordsMixin, {
attrs: {
sections: { embedded: 'always' }
}
});
and here is the format of the JSON payload I'm sending for a 'show'
{
"subject": {
"_id":"549987b098909eef0ac2d691",
"title":"Maths",
"sections":[{
"title":"Precalc",
"_id":"549987b098909eef0ac2d693"
}, {
"title":"Calc",
"_id":"549987b098909eef0ac2d692"
}],"__v":0
}
}
I get the errors in the console
Error while processing route: subjects.show undefined is not a function TypeError: undefined is not a function
at Ember.Mixin.create.extractSingle (http://localhost:3300/js/highered.js:2043:25)
at apply (http://localhost:3300/js/highered.js:20664:27)
at superWrapper [as extractSingle] (http://localhost:3300/js/highered.js:20240:15)
at Ember.Object.extend.extractFind (http://localhost:3300/js/highered.js:4007:21)
at Ember.Object.extend.extract (http://localhost:3300/js/highered.js:3892:37)
at http://localhost:3300/js/highered.js:11864:34
at invokeCallback (http://localhost:3300/js/highered.js:23228:19)
at publish (http://localhost:3300/js/highered.js:22898:9)
at publishFulfillment (http://localhost:3300/js/highered.js:23318:7)
at http://localhost:3300/js/highered.js:28736:9
highered.js:16581 undefined is not a function TypeError: undefined is not a function
at Ember.Mixin.create.extractSingle (http://localhost:3300/js/highered.js:2043:25)
at apply (http://localhost:3300/js/highered.js:20664:27)
at superWrapper [as extractSingle] (http://localhost:3300/js/highered.js:20240:15)
at Ember.Object.extend.extractFind (http://localhost:3300/js/highered.js:4007:21)
at Ember.Object.extend.extract (http://localhost:3300/js/highered.js:3892:37)
at http://localhost:3300/js/highered.js:11864:34
at invokeCallback (http://localhost:3300/js/highered.js:23228:19)
at publish (http://localhost:3300/js/highered.js:22898:9)
at publishFulfillment (http://localhost:3300/js/highered.js:23318:7)
at http://localhost:3300/js/highered.js:28736:9
Which as best I can tell is directly related to extractSingle at the this.keyForAttribute method
extractSingle: function(store, primaryType, payload, recordId, requestType) {
var root = this.keyForAttribute(primaryType.typeKey),
partial = payload[root];
updatePayloadWithEmbedded(store, this, primaryType, partial, payload);
return this._super(store, primaryType, payload, recordId, requestType);
},
although an interesting thing to note is that the error occurs at extractArray when I am using the subjects index route, which return the json above but with array brackets as well.
extractArray: function(store, type, payload) {
var root = this.keyForAttribute(type.typeKey),
partials = payload[pluralize(root)];
forEach(partials, function(partial) {
updatePayloadWithEmbedded(store, this, type, partial, payload);
}, this);
return this._super(store, type, payload);
}
Which makes me think that Ember Data is having trouble recognizing the format. This happens any time I define a serializer for a model, not just when I enable embedded records.
I'm hoping someone will be able to explain this. As a final note I've been using the Ember Data Model Fragments library as well, but I disabled that and still got this error so I don't think that is it.
The Embedded Records mixin doesn't work with the RESTSerializer before beta 9.
You can view the state of it here Ember-data embedded records current state?
You'll also want to be wary of updating ember or ember data without the other version in certain circumstances. Ember Data cannot read property 'async' of undefined

Extjs is passing my cfc a json string that I can not read

I am playing with the ExtJs4 cartracker application written by existdisolve. I was able to change his queries from rest requests to ajax requests. I also modified the api calls to use ajax to make ajax requests for updates.
I am not getting form or url data passed to my cfc. Instead, in firebug I see JSON passed. I am confused if it is not passed in the form or the url, how is this passed and how do I get to the data? I have tried deserialized the form and url and dumping these after the deserialize and I am told that it is not json.
Where would I find the json?
I am not allowed to post a picture. But it looks like this in the xhr window:
JSON
Active true
ColorID null
Shortname red
Longname Blood Red
So if it is being passed why can I not get to it?
Edit:
#existdissolve - I replaced the rest.js with ajax.js which looks like this:
/**
* Abstract REST proxy
*/
Ext.define('CarTracker6.proxy.Ajax', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.baseajax',
/*format: 'json',*/
limitParam: 'max',
startParam: 'offset',
sortParam: 'sortorder',
writer : {
type : 'ajax',
encode : false,
writeAllFields : true,
root : 'data',
allowSingle : true,
batch : false,
method: 'post',
params: { record: 'record' },
writeRecords : function(request, data) {
request.jsonData = data;
return request;
}
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
},
api: {
read: 'api/option/colors.cfc?method=getcolors',
create: 'api/option/colors.cfc?method=addcolors',
update: 'api/option/colors.cfc?method=updatecolors',
destroy: 'api/option/colors.cfc?method=deletecolors'
}
});
My read works perfectly and I can call the correct cfcs for colors, statuses, etc. and retrieve the requisite data. I am looking to pass parameters to the CFCs and that is not working.
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.writer.Json-cfg-encode:
if the encode property of your writer is set to false, all data is sent as raw post body. Instead, you can use
encode: true,
root: 'data', // must be set if encode is true

Nested JSON objects in Sencha Touch store using CakePHP backend API

I am using Sencha Touch 1.1 to build a bar locator. I am using CakePHP as my backend API and I want to be able to use the data as Cake outputs it.
Viewing the JSON data below you will see that the Pub data is returned in the 'Pub' array and the Suburb in a similar way. So accessing the data would be done as follows:
Pub.id, Pub.name, Pub.address_1
Does anyone know how I can use this format in my Sencha model and store?
I have my model and store setup as follows:
Ext.regModel('Pub', {
fields: ['id', 'name', 'address_1', 'address_2', 'marker', 'lat', 'lng', 'suburb']
});
Ext.regStore('NearbyStore', {
model: 'Pub',
sorters: 'suburb',
getGroupString: function(record) {
return record.get('suburb');
},
proxy: {
type: 'scripttag',
url: 'http://exampleurl/bars/nearby.json?lat=-55.8874&lng=-11.177',
reader: {
type: 'json',
root: 'results'
}
},
autoLoad: true
});
Below is the JSON data that is returned from my store proxy.
stcCallback1001({"results":[{"Pub":{"id":"125","name":"Brownsville Bowling & Recreation Club","address_1":"31a malouffst","address_2":"-","marker":"default_marker.png","lat":"-33.887402","lng":"151.177002"},"Suburb":{"name":"Knoxville"},"0":{"distance":"0.0002511751890598611"}},{"Pub":{"id":"1721","name":"Hampshire Hotel","address_1":"91 parramatta rd","address_2":"-","marker":"default_marker.png","lat":"-33.886799","lng":"151.177002"},"Suburb":{"name":"Brownsville"},"0":{"distance":"0.06684402352323478"}}]});
you should see
http://docs.sencha.com/touch/1-1/#!/api/Ext.data.Field-cfg-mapping
similar question on stackoverflow :
Accessing nested objects in JSON feed - Sencha Touch
So you should map your model like this :
Ext.regModel('Pub', {
fields: [
{
name: 'id',
type: 'string',
mapping: 'Pub.id'
},
{
name: 'name'
type: 'string',
mapping: 'Pub.name'
},
{
name: 'address_1',
type: 'string',
mapping: 'Pub.address_1'
},
{
name: 'AND SO ON.......'
}
});
Well, I've just started on sencha touch. So I hope im helping.. :)
you will not only have to make these, but also map filtering, remote sorting, success properties, validation errors, and so on. If you are planning a bigger project I would recommend you to switch to Sencha Touch 2 and use Bancha.
Then you will not have to do any of those things. And as a nice bonus you can simply expose your CakePHP models and don't have to write them manually again for Sencha Touch.

Load data from bd in senchaTouch app using webservice who return a json

I try to display some data in my Sencha touch application, but it doesn't work... and i can't find what I'm doing wrong.
My webSiste return a json object who look like this
[{"name":"a","id":1}]
the script is getting the Json and display it:
Ext.regApplication({ name: 'Command',
phoneStartupScreen: 'phone-startup.png',
phoneIcon: 'apple-touch-icon.png',
launch: function(){
this.viewport = new Ext.Panel(
{
layout: 'fit',
fullscreen: true,
items: [{xtype: 'list',
itemTpl: new Ext.XTemplate('<div>{name}</div>'),
store: stores
}],
dockedItems: [{xtype: "toolbar",
dock: "top",
title: 'MovieCommand',
items: [{ui: 'back',text: 'back',handler: function(){}}]
}]
});
}
});
Ext.regModel('Commands', {
fields: ['name', 'id' ]
});
var stores = new Ext.data.Store(
{model: 'Commands',
proxy: {type: 'scripttag',
url: 'http://localhost:8080/GTI710/commandes/liste.htm',
format: 'sencha',
reader: new Ext.data.JsonReader ({
type: 'json',
})
},
});
stores.load();
I don't have any error in the java script but nothing is displayed.
I just want to have the "a" displayed but it doesn't work, I don't know why...
The ScriptTagProxy, which you are using, requires a response from server that's composed of legitimate Javascript code.
Specifically, the code is a callback function with the desired JSON data you what as the its first argument:
someCallback([{"name":"a","id":1}]);
The name of someCallback is generated dynamically by Sencha Touch when the request is sent. In other words, your attempt to store the response with a static file will not work.
The name of someCallback is passed as a parameter in the GET request sent by Sencha Touch, the key of which defaults to callback.
If you don't want to have a web server as the data source, checkout Ext.util.JSONP.