Local Storage in sencha - sencha-touch

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?

Related

Add a auto initialize function inside a Sencha Touch model to manipulate model's data

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
});
}
}
}
});

How to configure a Sencha Touch 2 store, to read a multiple level json object

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'

Update record in Sencha Touch Data Store with Ajaxproxy

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.

ExtJS: How do I get raw JSON data from Ext.data.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!

Sencha Touch MVC load store

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',