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.
Related
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}
}
Im looking for a tutorial or an example for sencha touch 2 MVC STORE which deals with Jsonp link and fetches data from there, ONLY MVC BASE .I need to learn how Store, Model, Controller and View interact with each other in MVC based structure . any suggestion ? between I need to understand how to fetch and work with jsonp links and datas, Thanks
Download sencha touch 2 and find oreilly example. In this example in About panel Tweets page loads data from store (reader type is jsonp). Also you should check another examples like touchtweets, geocongress, navigationview etc.
I think it's the best way for start.
I have found the documentation has a lot of good tutorials on understanding sencha touch's MVC structure, as well as each individual topics like stores and models.
MVC in depth part 1:
http://docs.sencha.com/touch/2-0/#!/video/mvc-part-1
MVC in depth part 2:
http://docs.sencha.com/touch/2-0/#!/video/mvc-part-2
The docs also have a guide section that goes over everything that you need to know too.
http://docs.sencha.com/touch/2-0/#!/guide
A simple example of model,store and view using jsonp
How jsonp looks like.
callback({"Message":"Success","Post":[{"id":"35","UserId":"faisalkhalid690","Content":"lol","Time":"2013-12-03 05:28:15"},{"id":"50","UserId":"faisalkhalid","Content":"asdfasdfasdf","Time":"2013-12-03 05:52:27"},{"id":"51","UserId":"faisalkhalid","Content":"sadfasdfasdf","Time":"2013-12-03 05:52:38"},{"id":"52","UserId":"faisalkhalid","Content":"holloa","Time":"2013-12-03 05:52:50"},{"id":"70","UserId":"faisalkhalid690","Content":"hello","Time":"2013-12-04 23:22:52"}]});
Model for this jsonp.
Ext.define('talkbag.model.Comments', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id',
fields: [
{ name: 'id', type: 'auto' },
{ name: 'UserId', type: 'auto' },
{ name: 'Content', type: 'auto' },
{ name: 'Time', type: 'auto' }
]
}
});
Store:
Ext.define('talkbag.store.Comments', {
extend:'Ext.data.Store',
storeId:'Comments',
config:{
autoLoad: true,
model:'talkbag.model.Comments',
proxy: {
type: 'jsonp',
url : 'http://www.litemake.com/ViewComments.php?Pid='+talkbag.User.PostId,
reader: {
type: 'json',
rootProperty: 'Post'
}
}
}
});
View:
Ext.define('talkbag.view.ViewPost.ViewCommentDetail', {
xtype:'ViewCommentDetail',
extend:'Ext.dataview.List',
config:{
store:'Comments',
itemTpl:'<table><tr><td width="80px"><table align="center"><tr><td align="center"><img src="http://www.litemake.com/getPic.php?userId={UserId}" heigth="30px" width="30px"/></td></tr><tr><td style="font-size:0.6em">{UserId}</td></tr></table></td><td style="padding-left:20px"><table><tr><td style="font-size:0.7em; padding:0px 0px 5px 0px">{Content}</td></tr><tr><td style="font-size:0.5em">{Time}</td></tr></table></td></tr></table>'
}
});
If you need some information about JSONP - Server Side, then have a look to
the Sencha Touch API (JSONP)
There you can find serverside methods to handle your JSONP request for common server side programm languages like PHP, Java or ASP.net.
For PHP it would look like this:
// From your Sencha JSONP Store, you will get a callback parameter which we
// need to put in our $callback var, for later usage.
$callback = $_REQUEST['callback'];
// Create the output object.
// this could also be a database output, but remember to
// convert it into an array
$output = array('a' => 'Apple', 'b' => 'Banana');
// start output
// this section switches between a jsonp callback or usual json output.
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
As Faisal Khalid already said, the output will look like...
myCallbackName({
"message":"success",
"total":2,
"data":[
{"prename":"Bob","lastname":"example"},
{"prename":"John","lastname":"Beard"}
]
});
... where you've defined myCallbackName as the callback name in your sencha application (store configuration).
The config is called callbackKey and is set to callback by default.
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.
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',
};
}
});
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'
}
}
});