I have setup a SenchaTouch/PhoneGap app that pulls information from an external XML feed. My problem is this will obviously only work when online.
How do I go about storing the information from the external feed in the local storage to be used offline?
Here is the app data store code:
App.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
idProperty: 'id',
type: 'xml',
root: 'events',
record: 'event'
}
}
});
App.eventstore.read();
Update after Ilya139's answer:
I've implemented the code, but now my list is empty... :(
Store
App.eventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'ajax',
url: 'http://the-url-to-the-file.xml',
reader: {
idProperty: 'id',
type: 'xml',
root: 'events',
record: 'event'
}
}
});
App.eventstore.read();
App.eventstore.each(function(record){record.save();});
App.offlineeventstore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'localstorage',
id:'events'
}
});
App.offlineeventstore.read();
Model
Ext.regModel('Event', {
fields: [
{name: 'id', mapping: '#id', type: 'integer'},
{name: 'title', type: 'string'},
etc etc...
],
proxy: {
type: 'localstorage',
id:'events'
}
});
And the list is set to use the offline store:
items: [{
xtype: 'list',
store: App.offlineeventstore,
itemTpl: '{title}',
grouped: true,
indexBar: true,
Add this to the Event model:
proxy: {
type: 'localstorage',
id:'events'
}
And then for each event that you download call save() like this:
App.eventstore.each(function(record){record.save();});
Then to load:
App.offlinestore = new Ext.data.Store({
model: 'Event',
sorters: 'title',
autoLoad: true,
getGroupString : function(record) {
return record.get('title')[0];
},
proxy: {
type: 'localstorage',
id:'events'
}});
Update
App.eventstore.load(function(){
App.eventstore.each(function(record){record.save();});
offlineeventstore.load();
});
Related
JsOnStore Coding
Ext.define('RouteSeqModel', {
extend: 'Ext.data.Model',
fields: [{name: '_id', type: 'number'}, 'Route_Seq','Location_Name']
});
var RouteSeqStore = Ext.create('Ext.data.JsonStore', {
model: 'RouteModelSeq',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'get-routeseq.php',
api: {
create: 'insert-routeseq.php',
//read: 'http://visual04/ModuleGestion/php/Pays.php?action=read',
update: 'update-routeseq.php',
//destroy: 'http://visual04/ModuleGestion/php/Pays.php?action=destroy'
},
actionMethods: 'POST',
extraParams: {
'_id' : '0',
},
reader: {
type: 'json',
//idProperty: '_id'
},
writer: {
type: 'json',
//id: '_id'
}
}
});
this is the combo box when selected changed then pass the extraparams to get the data and show at grid panel
xtype: 'combobox',
width: 191,
store: RouteNameStore,
displayField : "Route_Code",
fieldLabel: 'Route Code',
labelWidth: 70,
allowBlank: false,
editable: false,
listeners: {
select: function( combo, records, eOpts ) {
console.log("Combo selected _id : "+records[0].get('_id'));
RouteSeqStore.load({
params:{
_id: records[0].get('_id')
}
});
}
}
and get-routeseq.php get work fine, this is firebug return JSON data from get-routeseq.php
[{"Route_ID":"1","Route_Seq":"1","Route_LocationID":"1","_id":"1","Location_ID":"1","Location_Name":"TRY","AddBy_ID":"2"},
{"Route_ID":"1","Route_Seq":"2","Route_LocationID":"2","_id":"2","Location_ID":"2","Location_Name":"ABC","AddBy_ID":"2"}]
all working fine, but firebug with this error
TypeError: d.read is not a function
...f(p==k){if(a+E+l.width>(O>=0?u.x+u.width-b:b-u.x)){p=M}}else{if(a+E>l.width){p=k...
why?
replace model: 'RouteModelSeq',
with model: 'RouteSeqModel',
Model:
Ext.define('Product', {
extend: 'Ext.data.Model',
fields: [
{name: 'product', type: 'string'},
// {name: 'active', type: 'string'},
{name: 'balance', type: 'string'}
]
});
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'ajax',
url: 'treegrid.json'
},
folderSort: true
});
TreeGrid:
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: Ext.getBody(),
collapsible: true,
useArrows: true,
rootVisible: false,
store: store,
multiSelect: true,
singleExpand: true,
//the 'columns' property is now 'headers'
columns: [{
xtype: 'treecolumn',
text: 'Ürün',
flex: 2,
sortable: true,
dataIndex: 'product'
},{
text: 'Bakiye',
flex: 1,
dataIndex: 'balance',
sortable: true
}]
});
this.add(tree);
this.doLayout();
My Problem:
I'm able to load my treegrid with this url json store. But I want to load it with decoded json object which comes from the server. Something like below:
Store:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
root: inData,
folderSort: true
});
inData:
{"text":".",
"children":[
{"product":"Mevduat","balance":"15000","expanded":"true","children":[
{"product":"Vadesiz Mevduat","balance":"7000","expanded":"true","children":[
{"product":"Vadesiz Hesap","balance":"3500","leaf":"true"},
{"product":"fk Hesap","balance":"3500","leaf":"true"}
]
},
{"product":"Vadeli Mevduat","balance":"8000","expanded":"true","children":[
{"product":"Kirik Vadeli Hesap","balance":"3000","leaf":"true"},
{"product":"Birikimli Gelecek Hesabı","balance":"5000","leaf":"true"}
]}]
},
{"product":"Bireysel Krediler","balance":"40000","expanded":"true","children":[
{"product":"Konut Kredisi","balance":"15000","leaf":"true"},
{"product":"Arsa Kredisi","balance":"25000","leaf":"true"}
]
}]}
But if I use inData json object my tree panel doesn't display texts.
Use a memory proxy and the root config:
var store = Ext.create('Ext.data.TreeStore', {
model: 'Product',
proxy: {
type: 'memory'
},
root: inData,
folderSort: true
});
I have been trying to find a solution to upgrading the code below from ExtJs3.4 to ExtJs 4.2?
I found some answers and looked into Sencha's docs, but still having hard time with it.
If anyone knows how to rewrite this code in ExtJs4.2, please let me know. Thanks in advance.
var config =
{
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: '/main/...' }),
reader: new Ext.data.JsonReader
({
root: 'data',
totalProperty: 'totalCount',
id: 'id',
fields:
[
'alert_id',
{name: 'duration', type: 'int'},
{name: 'start_date', type: 'date', dateFormat: 'timestamp'},
{name: 'end_date', type: 'date', dateFormat: 'timestamp'},
'monitor'
]
})
}),
}
// more code here
This is what I know from the code above:
Models are using the field not Stores anymore
reader should be inside the proxy
These are the warning
[DEPRECATED][4.0][Ext.data.Store]: Passing a "fields" config via the store's reader config is no longer supported. Instead you should configure a model and pass it as the store's "model" config. Please see the header docs for Ext.data.Store for details on properly setting up your data components.
ext-all.js (line 21)
[DEPRECATED][4.0][Ext.data.Store] reader (config): The reader config should now be specified on the configured proxy rather than directly on the store.
Addendum
I was doing it this way at first:
Ext.define('User', {
extend: 'Ext.data.Model',
id: 'id',
fields:
[
'alert_id',
{name: 'duration', type: 'int'},
{name: 'start_date', type: 'date', dateFormat: 'timestamp'},
{name: 'end_date', type: 'date', dateFormat: 'timestamp'},
'monitor'
]
});
var config =
{
store: new Ext.data.Store({
model:'User',
proxy:
{
url: '/main/...',
reader: new Ext.data.JsonReader
({
root: 'data',
totalProperty: 'totalCount',
})
}
}),
// more code here
}
So I was not sure what to write instead of reader: new Ext.data.JsonReader.
Also whether to use the Model or not since Store was not using fields anymore. I had no idea about Ext.data.JsonStore until I saw the answer.
Chris Farmer's answer is correct. However, here's a more thorough explanation.
Ext now encourages you to document the format of your data, so you should use an Ext.data.Model to define the field names. The suggested way to do it, is to define the proxy on the model itself so it can be loaded independent of a store
// File 1
Ext.define('my.User', {
extend: 'Ext.data.Model',
fields: [
'alert_id',
{name: 'duration', type: 'int'},
{name: 'start_date', type: 'date', dateFormat: 'timestamp'},
{name: 'end_date', type: 'date', dateFormat: 'timestamp'},
'monitor'
],
proxy: {
type: 'ajax',
url: '/main/...',
// Reader is now on the proxy, as the message was explaining
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
}
});
// File 2
// Use the model with the store
var config = {
// Passing the model definition to the store as the message was explaining
store: new Ext.data.JsonStore({model: 'my.User', autoLoad: true})
};
Ext still allows you to use fields definitions instead of models when creating stores, but it's not recommended, an implicit model will be created. Here's how to do it.
var config = {
store: new Ext.data.JsonStore({
fields: [
'alert_id',
{name: 'duration', type: 'int'},
{name: 'start_date', type: 'date', dateFormat: 'timestamp'},
{name: 'end_date', type: 'date', dateFormat: 'timestamp'},
'monitor'
],
proxy: {
type: 'ajax',
url: '/main/...',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
}
});
};
How about this? The JsonStore is documented at http://docs-origin.sencha.com/extjs/4.2.0/#!/api/Ext.data.JsonStore.
initComponent: function () {
var config = {
store: new Ext.data.JsonStore({
autoLoad: true,
fields: [ 'alert_id', 'duration', 'start_date', 'end_date' ],
proxy: {
type: 'ajax',
url: '/main/...',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
}
})
}
}
initComponent: function () {
this.store= new Ext.data.JsonStore({
autoLoad: true,
fields: [ 'alert_id', 'duration', 'start_date', 'end_date' ],
proxy: {
type: 'ajax',
url: '/main/...',
reader: {
type: 'json',
root: 'data',
totalProperty: 'totalCount'
}
}
});
this.callParent(arguments);
}
What am I doing wrong? Of all the fields displayed in the grid only Working Group. EXTjs 4.2.1.
Tried different variants that have been found here, but, alas, nothing has helped understand what is wrong here.
Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [
{ name: 'WorckGroup', type: 'string' },
{ name: 'Statistics', type: 'auto' },
{ name: 'Specialist', type: 'string', mapping: 'Statistics.Specialist' },
{ name: 'ScallCount', type: 'int', mapping: 'Statistics.SCallCount' },
{ name: 'AverageDuration', type: 'auto', mapping: 'Statistics.AverageDuration' }
]
});
var store = Ext.create('Ext.data.Store', {
model: 'myModel',
proxy: {
type: 'ajax',
url: '/omnireports/ajaxgrid',
reader: {
type: 'json',
}
},
autoLoad: true
});
var basegrid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{ header: 'WG', width: 200, dataIndex: 'WorckGroup' },
{ header: 'SP', dataIndex: 'Specialist' },
{ header: 'SCC', dataIndex: 'SCallCount' },
{ header: 'AD', dataindex: 'AverageDuration' }
], });
json
[
{"WorckGroup":"3D",
"Statistics":[
{"Specialist":"В А","SCallCount":64,"AverageDuration":0.1136067},
{"Specialist":"К Т","SCallCount":170,"AverageDuration":0.1045816}]
{"WorckGroup":"SD",
"Statistics":[
{"Specialist":"B A","SCallCount":197,"AverageDuration":0.1364689}]
}
]
Your mappings don't make sense. Statistics is an array, so Statistics.Specialist doesn't map to anything.
Your root for the reader should probably be WorckGroup.Statistics and you should include the WorckGroup in each item.
reader: {
type: 'json',
root: 'WorckGroup.Statistics'
}
Then remove the mapping from each field in the model.
I have a combobox and when I load it with a particular value (not empty/default), it rendered blank.
I think it's because the properties name and valueField are different. Create/update works and the values are in the combo. Can you help?
{
xtype: 'combobox',
anchor: '100%',
fieldLabel: 'Organisme',
name: 'idOrganismePriseEnCharge',
displayField: 'Organisme',
store: 'Organismes',
valueField: 'idOrganisme'
}
My Model:
Ext.define('MG.model.TypeAide', {
extend: 'Ext.data.Model',
idProperty: 'idTypeAide',
fields: [
{
name: 'idTypeAide'
},
{
name: 'TypeAide'
},
{
name: 'Montant'
},
{
name: 'idOrganismePriseEnCharge'
},
{
name: 'Organisme'
}
]
});
My store:
Ext.define('MG.store.TypesAides', {
extend: 'Ext.data.Store',
requires: [
'MG.model.TypeAide'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
model: 'MG.model.TypeAide',
storeId: 'StoreTypesAides',
proxy: {
type: 'ajax',
api: {
create: 'http://localhost/MG/php/TypesAides.php?action=create',
read: 'http://localhost/MG/php/TypesAides.php?action=read',
update: 'http://localhost/MG/php/TypesAides.php?action=update',
destroy: 'http://localhost/MG/php/TypesAides.php?action=destroy'
},
reader: {
type: 'json',
root: 'data'
},
writer: {
type: 'json',
root: 'data'
}
}
}, cfg)]);
}
});
valueField should match a field from the model you're using. In your case it's idOrganisme and there is no such field in the model.