I'm starting coding with Sencha Touch and I would like to do the same thing as below, but at distance:
MyApp.search = new Ext.data.TreeStore({
model: 'ListItemSearch',
proxy: {
type: 'ajax',
url: 'search.json',
reader: {
type: 'tree',
root: 'items'
}
}
});
It's working fine, but I'd like to make it at distance with JSONP like this:
MyApp.search = new Ext.data.TreeStore({
model: 'ListItemSearch',
proxy: {
type: 'ajax',
url: 'http://www.test.com/search.json',
reader: {
type: 'tree',
root: 'items'
}
}
});
I don't know how to code this, and the examples that I tried didn't work.
How can I do this?
if your JavaScript code isn't running at the same domain as your ajax request (test.com) then you will have security issues. Check to make sure the proxy type 'ajax' is using JSONP
I think you have to use the sencha JSONP library to do this.
Related
I need to connect to an API using a Sencha Touch store and a mode.
The problem represents the API's response json, which is similar to:
{
"The_Api": {
"initSession":{
"calledMethod":"The_Api::initSession",
"status":"1",
"error":"0",
"errorCode":"0",
"errorMessage":"",
"data":{
"token":"api_535f6c5d68dc78.56464399"
}
}
}
}
I need to retrieve the token value from this response.
How to I configure my store to get to the token value?
Ext.define('TestApp.store.SecretKeyStore', {
extend: "Ext.data.Store",
config: {
storeId: 'SecretKeyStore',
model: "TestApp.model.SecretKeyModel",
params: {
lang: 'FR',
method: 'initSession',
username: TestApp.utils.GlobalVariables.getUsername(),
secretKey: TestApp.utils.GlobalVariables.getSecretKey()
},
proxy: {
type: 'ajax',
noCache: true,
url: '/rest_json.php',
remoteFilter:true,
reader: {
type: 'json',
rootProperty: 'data'
}
}
}
});
What root property should I use?
Its a js object so this should work:
rootProperty:'The_Api.initSession.data'
When I call the sync method on a ExtJS store and there is one object to update, the proxy update method gets called with one object as parameter.
If there are more objects to update, an array of objects is passed to the proxy update method.
The endpoint of my proxy is a MS MVC controller. I can't overload the requested method with a single object and a list of objects (not supported on a MVC controller due the model binding).
How can I make this work? (either update 1 object at a time from ExtJS, or use different requests for a single object or an array of objects)
ExtJS store:
Ext.define('MyApp.store.Configuration', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.Configuration',
model: 'MyApp.model.Configuration',
autoLoad: false,
isLoaded: false,
proxy: {
type: 'ajax',
actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' },
limitParam: undefined,
pageParam: undefined,
startParam: undefined,
api: {
read: 'MyAppData/ConfigurationRead',
create: MyAppData/ConfigurationUpdate',
update: MyAppData/ConfigurationUpdate',
destroy: MyAppData/ConfigurationDelete'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
messageProperty: 'message'
}
},
MVC Controller, not working:
[HttpPost]
public ActionResult ConfigurationUpdate(List<Configuration> data)
{
// do something
}
[HttpPost]
public ActionResult ConfigurationUpdate(Configuration data)
{
// do something
}
Have you looked at the allowSingle config of the JSON writer? http://docs.sencha.com/extjs/4.2.0/source/Json3.html#Ext-data-writer-Json-cfg-allowSingle
I'm developing a simple form with Secha Touch. I have defined a DataStore for my model like this:
App.stores.shopinglists = new Ext.data.Store({
model: 'ShopingList',
autoLoad: false,
proxy: new Ext.data.AjaxProxy({
type: 'ajax',
url: 'http://localhost:2795/ShopingListService/',
reader: {
type: 'json',
root: 'ResultData',
totalProperty: 'Total',
successProperty: 'Success'
},
writer: {
encode: true,
type: 'json'
}
})
});
The view loads fine, and I can see a list of items and edit them. However, when I click the update button, I get the following error:
Uncaught Error: You are using a ServerProxy but have not supplied it with a url.
What I am missing here? The proxy has the url defined, but when update is invoked, it's undefined.
Edit: The button just call a controller action.
onSaveAction: function () {
var model = this.getRecord();
Ext.dispatch({
controller: 'ShopingLists',
action: (model.phantom ? 'save' : 'update'),
data: this.getValues(),
record: model,
form: this
});
},
The code executed by the controller is this:
update: function (params) {
debugger;
var tmpshopingList = new App.models.ShopingList(params.data);
var errors = tmpshopingList.validate();
if (errors.isValid()) {
params.record.set(params.data);
params.record.save();
this.index();
} else {
params.form.showErrors(errors);
}
},
I think I know what is happening: The model knows it has a server proxy, but all of the configurations are not being copied over. Perhaps this is a bug with Sencha Touch 1.x.
Try putting the proxy configuration into your model, not your store.
I've exactly the same problem from this Question. However I'm using Sencha Touch 2 and I don't know how to actually use this custom store. I define my REST proxies inside the model classes. How would I access/use this custom proxy?
proxy: {
type: 'rest',
url: 'http://someUrl',
reader: {
type: 'json',
}
}
It is fairly simple in Sencha Touch 2. This presumes you have an MVC architecture.
Firstly, you model - app/model/Image.js:
Ext.define('MyApp.model.Image', {
extend: 'Ext.data.Model',
// Require your custom proxy
requires: ['MyApp.proxy.MyCustomProxy'],
config: {
fields: ['name'],
proxy: {
// set the type of your proxy
type: 'mycustomproxy'
}
}
});
And then define your proxy - app/proxy/MyCustomProxy.js:
Ext.define('MyApp.proxy.MyCustomProxy', {
extend: 'Ext.data.proxy.Proxy',
// Set your proxy alias
alias: 'proxy.mycustomproxy',
...
});
How can I use multiple URLs in a proxy in Extjs 4?
Proxy:{
url:'?'
}
Thanks
storename.getProxy().url='your-url'
in your store:
proxy: {
type: 'ajax',
api: {
read: '/controller/read',
update: '/controller/update',
create: '/controller/create'
},
....