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'
Related
When I load a store, due to the API structure, I get a json object inside my model:
Ext.define('TestApp.model.SecretKeyModel', {
extend: 'Ext.data.Model',
config:{
identifier: {
type: 'uuid'
},
fields: [
{ name:'theRecord', type:'json' }
]
},
extractToken: function() {
var record = this;
var token = record.initSession.token;
console.log('token: ' + token);
}
});
I need to extract the token from that json object.
For that, i think I should write a function right there, inside the model.
How can I call it, when the store loads, to manipulate the data and extract the token?
I faced a similar situation 1 hour ago, i needed to edit data during loading or immidiatly after. I ended with this solution:
Ext.define('TestApp.store.MyStore', {
extend: 'Ext.data.Store',
requires: ['TestApp.model.SecretKeyModel'],
config :{
model: 'TestApp.model.SecretKeyModel',
proxy: {
type: 'ajax',
url: TestApp.utils.GlobalVariables.getServerUrl(),
reader: {
type: 'json',
rootProperty: ''
}
},
listeners: {
refresh: function(store, data, eOpts) {
store.each(function (item, index, length) {
item.extractToken(); // call this on every record loaded in the store
});
}
}
}
});
From a typical store like this
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'},
{name: 'age', type: 'int'},
{name: 'eyeColor', type: 'string'}
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
Is it possible to get raw Json from myStore?
What about:
myStore.proxy.reader.rawData
The accepted solution did not work in my configuration: ExtJs 4.1 and a grid with a memory proxy - it returned empty after I added items to the gird (and the store object reflected that). The following code worked for encoding store contents into a JSON string:
var json = Ext.encode(Ext.pluck(store.data.items, 'data'));
Cheers!
Took me ages to find a solution to this but here is one solution that will work.
myStore .on({ 'load': function (store, records, successful)
{
console.log(store.getProxy().getReader().rawData);
}
});
The proxy reader rawData/jsonData will become accessible after the store is created. To access it try the following:
store.on('load', function() {
console.log('store.proxy.reader.jsonData');
console.log(store.proxy.reader.jsonData);
}, this, { single: true });
Ext.data.Store({....
proxy: {
...
reader: {
**keepRawData: true,**
type: 'json',
rootProperty: 'root',
successProperty: 'success'
}
}
});
Look like I found the solution by hooking event listeners to data store:
var myStore = Ext.create('Ext.data.Store', {
...
listeners: {
'load': {
fn: function(store, records, success, operations) {
Ext.each(records, function(rec) {
console.log(Ext.encode(rec.raw));
});
}
}
}
...
});
maybe, you can try with this:
var json = Ext.JSON.encode(myStore.getRange());
cya!
I have an MVC app that I have been working on but I seem to be missing some fundamentals with namespaces and accessing objects correctly. I don't understand how to load my store when the index method is called. In my model, autoload is false and I am using the same code that I have used in other apps (non MVC) but to no avail. Any thoughts?
This is my app.js:
Ext.regApplication({
name: 'MVC',
defaultUrl: 'Home/index',
launch: function(){
console.log("Launching");
this.viewport = new MVC.views.Viewport();
}
});
This is my controller:
Ext.regController('Update', {
// index action
index: function(){
if(networkStatus()==true){
console.log("Checking for Updated Config: " + CONFIG_URL);
MVC.stores.Updates.load();//Uncaught TypeError: Cannot read property 'Updates' of undefined
}
if ( ! this.indexView){
this.indexView = this.render({
xtype: 'UpdateIndex',
});
}
this.application.viewport.setActiveItem(this.indexView);
},
});
This is my Model:
Ext.regModel('UpdateModel', {
fields: [
{name: 'id'},
{name: 'version'},
{name: 'date'},
{name: 'md5'},
{name: 'manifest-doc'},
{name: 'manifest-image'}
]
});
This is my Store:
Ext.regStore('Updates', {
model: 'UpdateModel',
storeId: 'Updates',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'app/data/config.min.json',
reader: new Ext.data.JsonReader({
root: 'config',
}),
timeout: 6000,
listeners: {
exception:function () {
console.log("Update Failed");
}
}
}
});
Try
var updatesStore = Ext.getStore("Updates");
http://docs.sencha.com/touch/2-0/#!/api/Ext-method-getStore
What is MVC? It should be the name of the app i.e.
Ext.regApplication({
name: 'MVC',
I have the following code .I want to load the test model in my local storage but the value field in my browser is empty.
Ext.regModel('test', {
fields: [{name:'ii',type:'int'},{name:'query',type:'string'}],
proxy: {
type: 'localstorage',
id : 'testuser'
}
});
var store=new Ext.data.Store({
model:'test',
data:[{ii:'21',query:'g' }]
});
store.add({ii:'21'},{query : 'q'});
store.load();
store.sync();
You have to mention the proxy parameter under the Ext.data.Store
ie code should be changed to
Ext.regModel('test', {
fields: [{name:'ii',type:'int'},{name:'query',type:'string'}],
});
var store=new Ext.data.Store({
model:'test',
proxy: {
type: 'localstorage',
id : 'testuser'
}
data:[{ii:'21',query:'g' }]
});
Now try it?
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.