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);
}
Related
I have the following store defined in store:
Ext.define('EDUX.store.Students', {
extend: 'Ext.data.Store',
alias: 'store.students',
fields: ['fname', 'lname', 'age', 'enrol', 'class','gender'],
proxy: {
type: 'ajax',
method: 'get',
withCredentials: true,
url: global.getBaseUrl() + 'api/api.php?student=view',
reader: {
type: 'json',
rootProperty: 'rows'
}
}
});
CORS works as expected. However, when I define the same store in viewModel, CORS does not work. Following is my code in viewModel:
Ext.define('EDUX.view.settings.SettingsModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.settings',
data: {
name: 'EDUX',
school: 'Programme'
},
stores: {
students: {
fields: ['fname', 'lname', 'age', 'enrol', 'class','gender'], withCredentials: true,
proxy: {url:global.getBaseUrl() + 'api/api.php?student=view',type: 'ajax', reader: {type: 'json', rootProperty: 'rows'}},
autoLoad:true
}}
});
Is there something am missing or could it be a bug?
Your store definitions are not the same, which you would clearly see if you would use proper indentation. Your standalone definition:
fields: ['fname', 'lname', 'age', 'enrol', 'class','gender'],
proxy: {
type: 'ajax',
method: 'get',
withCredentials: true,
url: global.getBaseUrl() + 'api/api.php?student=view',
reader: {
type: 'json',
rootProperty: 'rows'
}
}
Your viewmodel definition, prettified:
fields: ['fname', 'lname', 'age', 'enrol', 'class','gender'],
withCredentials: true,
proxy: {
url:global.getBaseUrl() + 'api/api.php?student=view',
type: 'ajax',
reader: {
type: 'json',
rootProperty: 'rows'
}
},
autoLoad:true
You should definitely check whether withCredentials can be defined on both store or proxy, or whether this causes the difference; whether autoLoad changes anything, whether method:'get' changes anything.
I have this JSON:
{
"aaa": {
"list": {
"count":"1",
"data": [
{"id":"1","username":"user1","email":"user1#test.com"}
]
}
}
}
And this is my Store:
var store = Ext.create('Ext.data.Store', {
fields : [ 'id',
'username',
'email'],
autoLoad : true,
proxy: {
type: 'ajax',
api: {
read: 'server/users'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
}
}
});
And this is my Grid:
xtype: 'grid',
title: 'Users',
id: 'users',
store: store,
columns: {
items: [
{text: 'ID', dataIndex: 'id', editor: 'textfield'},
{text: 'Name', dataIndex: 'name', editor: 'textfield' },
{text: 'Email', dataIndex: 'email', editor: 'textfield' },
]
},
But this code is not working. I don't show JSON data on my grid. I think the problem is that I don't reach JSON elements.
How can I reach this elements? (aaa.data.id, aaa.data.name, aaa.data.email is not working)
Since you don't want (or can't) change the structure of your JSON, change the reader of the proxy on your store to correspondent with the data structure of your JSON.
reader: {
type: 'json',
rootProperty: 'aaa.list.data',
totalProperty: 'aaa.list.count'
}
The root should be root: 'aaa.list.data'. The root is supposed to point to the array of records. data doesn't appear in the top level object returned at all. It would be like saying:
var o = {
aaa: {
data: [{}]
}
}
console.log(o.data); // Nothing
You can use the reader's transform method to format the data before the store processing takes place.
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',
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 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();
});