ExtJS4 Ext.data.Store Load data from a function - javascript

Using ExtJS4 Store, I want to execute a Javascript function to return json data, ie. getMyJsonData, to load the data into the store.
function getMyJsonData() {
var myjson = {... };
return myjson;
}
Trawling through the doco, I can't find a way to define a callback function to load the data, all I found was a Memory Store which loads an already defined data object.
How can I call a function instead ?
Ext.define('perhoo.store.Users',
{
extend: 'Ext.data.Store',
model: 'perhoo.model.User',
autoLoad: true,
data : {
users: [
{ id: 1, name: 'joe44', email: 'joe#joe.com'},
{ id: 2, name: 'bloggs44', email: 'bloggs#joe.com'}
]
},
proxy: {
type: 'memory',
data: this.data,
reader: {
type : 'json',
root : 'users'
}
}
EDIT
The reason I want to call a function is because I want to execute LinkedIn API.
And going through Ext JSONP Proxy (as it's cross domain) makes things 10x more complicated as I have to get LinkedIn auth etc etc (which I don't know how to do it yet)
i.e.
var mydata = null;
function onLinkedInAuth() {
// Linked in api to find connections
IN.API.Connections("me").result( function(result) {
mydata = result;
} );
}

ExtJS4's store using proxy to load data, check below:
var myStore = Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url : '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
autoLoad: true
});
When executed, it reads data from the url, /users.json, and store into itself.
Also, if you want to process data yourself and load them into store yourself, you can check below:
//this is the model we will be using in the store
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'phone', type: 'string', mapping: 'phoneNumber'}
]
});
//this data does not line up to our model fields - the phone field is called phoneNumber
var data = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'User',
data : data,
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'users'
}
}
});
And you could easily usesetProxy to change the behavior when you want.
Links:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.AbstractStore-method-setProxy
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.Memory

Related

How to make a model for a json array in extjs?

The data I'm getting back from my server looks like:
["admin", "user", "developer", "super"]
And I'm trying to map that into this model:
Ext.define('RoleModel', {
extend: 'Ext.data.Model',
//fields: [{}]
});
My store looks like this:
Ext.create('Ext.data.Store', {
model: 'RoleModel',
proxy: {
type: 'ajax',
url : '/roles',
reader: {
type: 'json'
}
},
autoLoad: true
});
How can I map the single array I'm getting from the server into my RoleModel?
You already got it, before your JSON can be parsed into your data model it needs to be in the form:
[
{ "role": "admin" },
{ "role": "user" },
{ "role": "developer" },
{ "role": "super" }
]
... but if you're rocking ExtJS 5.x you don't need to manually make the Ajax call - you can apply a transform on the proxy's reader, for example:
Ext.create('Ext.data.Store', {
model: 'RoleModel',
proxy: {
type: 'ajax',
url : '/roles',
reader: {
type: 'json',
transform: function(data) {
return data.map(function(x){
return { role: x };
});
}
}
}
});
» Fiddle
I ended up adding a role field to my model and doing something like:
Ext.Ajax.request({
url: '/roles',
success: function(response){
var json = Ext.JSON.decode(response.responseText);
var jsonObj = json.map(function(r){ return {role: r}});
store.loadData(jsonObj);
}
});

ExtJs: How to read GUID from server on insert into store via proxy

As per http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/row-editing.html example, I have the following code on my grid to facilitate adding new records to my store:
tbar: [{
text: 'Add Rate',
handler: function(button) {
var myGrid = button.up('grid');
//console.log(myGrid);
var myPlugin = myGrid.getPlugin('rowediting');
myPlugin.cancelEdit();
var r = Ext.create('RateManagement.model.CountrySpecific', {
id: '',
hostCountryId: '',
hostCountry: '',
rate: 0,
currencyId: '',
rateTypeId: '',
frequencyCode: '',
perFamilyMember: '',
familySize: 0
});
console.log(r);
var store = myGrid.getStore();
store.insert(0, r);
myPlugin.startEdit(0, 0);
}
}],
This is my model with the proxy:
Ext.define('RateManagement.model.CountrySpecific', {
extend: 'Ext.data.Model',
fields:
[
{name:'id', type: 'string'},
{name:'hostCountryId', type: 'string'},
{name:'hostCountry', type: 'string'},
{name:'rate',type: 'number', useNull: true},
{name:'currencyId', type: 'string'},
{name:'rateTypeId', type:'string'},
{name:'frequencyCode', type:'string'},
{name:'perFamilyMember'},
{name:'familySize', type: 'int', useNull: true}
],
proxy: {
type: 'rest',
format: 'json',
url: '/intake/sap/rates/CountrySpecific',
actionMethods: {
create : 'PUT',
read : 'GET',
update : 'PUT',
destroy: 'PUT'
}
}
});
Whenever I click "Add Rate" to insert a new record into my store, it calls my proxy and generates a GUID. However, when I go to click "Update" on that record, there is no ID value - it's just null. As a result, it just inserts a new record instead of updating the existing one I just created.
So, is there a way to use the reader of the proxy to try to update my model with the new ID that was generated?
Or, am I going about this the wrong way?

How to create a generic ExtJS combo box store?

I want to create a generic Extjs store for combo boxes.
The store should be able to:
Take a URL
Read data using a proxy from the server
Should work for any model
How can I achieve this?
This is what I have for start:
Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
url: rawURL,
reader: {
type: 'json'
}
}
})
Using ExtJS 4.1
function getGenericStore(storeURL, valField, dispField) {
var modelName = 'Model' + me.id;
var model = Ext.define(modelName, {
extend: 'Ext.data.Model',
fields: [
{name: valField, type: 'string'},
{name: dispField, type: 'string'}
]
});
return Ext.create('Ext.data.Store', {
proxy: {
type: 'ajax',
model: model,
url: storeURL,
reader: {
type: 'json',
read: function(response) {
var json = Ext.decode(response.responseText);
var records = [];
Ext.each(json, function(item) {
var record = Ext.create(modelName);
record.set(val, item[val]);
record.set(display, item[display]);
records.push(record);
});
return {
success: true,
total: json.length,
count: records.length,
loaded: true,
records: records
};
}
}
}
});
}

Sencha Store proxy is not getting called

I want to load store data dynamically and don't want to use model for this. if I provide data list gets populated but if I use store's proxy it doesn't get called and url is not getting hit. Please help.
Ext.define('TrainEnquiry.view.SearchTrainResults', {
extend: 'Ext.List',
xtype: 'searchedtrainresult',
requires: 'Ext.data.proxy.JsonP',
config: {
itemId: 'searchedtrainresult',
title: 'Train Result:',
itemTpl: '<div class="myContent">'+
'<div><b>{number}</b> </div>' +
'</div>',
store: {
fields: ['number'],
/*data: [
{number: 'Cowper'},
{number: 'Everett'},
{number: 'University'},
{number: 'Forest'}
]*/
proxy: {
url: 'http://abc.amazonaws.com/search.json',
type:'jsonp',
extraParams : {
'q' : '12313'
},
reader: {
type: 'json',
},
success: function() {
debugger;
console.log('success');
},
failure: function() {
debugger;
console.log('failure');
}
}
},
onItemDisclosure: true
}
});
I think your "fields" config option needs to be a proper Ext.data.Field object, so maybe this would work:
Ext.define('TrainEnquiry.view.SearchTrainResults', {
...
config: {
...
store: {
fields: [ { name: 'number', type: 'string'} ],
proxy: {
...
}
},
...
}
});
(Reference from Sencha forums)
You could try removing the pageParam and startParam from your proxy. Just like this
Ext.create('Ext.data.Store', {
storeId:'UserStore',
autoLoad: true,
model: 'UserModel',
proxy: {
type: 'jsonp', // Because it's a cross-domain
url : 'https://api.twitter.com/1/lists/members.json?owner_screen_name=Sencha&slug=sencha-team&skip_status=true',
reader: {
type: 'json',
root: 'users' // The returned JSON will have array
// of users under a "users" property
},
// Removing pageParam and startParam
pageParam: undefined,
startParam: undefined
}
});
Here is an example http://jsfiddle.net/alexrom7/YNTuN/
Try changing the type of your proxy store to Ajax (type: 'ajax'). Just like this
Ext.create('Ext.data.Store', {
model: 'User',
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type: 'json',
}
},
autoLoad: true
});

Getting the LocalStorageProxy working with a TreeStore

Hullo there,
I am building a Sencha Touch iPhone app that utilises a TreeStore which works nicely with a NestedList but I've hit a wall.
It needs a way to read data in a static store (the TreeStore), load it into localStorage so it's writable and then save some user preferences. I've figured out that the localStorageProxy is most likely what I need (I was relieved to discover I didn't have to serialise and deserialise the JSON store manually!) but after reading the documentation on it and trying and failing a few things I'm at a loss.
As it stands, it generates the localStorage… storage but it's empty, this I guess is because I haven't loaded anything into it but on doing app.stores.event_store.load(); the screen is blank and Console shows that the localStorage is empty with no errors.
My model:
Ext.regModel('Events', {
fields: [
{name: 'text', type: 'string'},
{name: 'info', type: 'string'},
{name: 'attend', type: 'boolean', defaultValue: 'false'}
]
});
My store:
app.stores.event_store = new Ext.data.TreeStore({
model: 'Events',
root: data,
storeId: 'eventStoreId',
proxy: {
type: 'localstorage',
id: 'eventsAttending',
url: 'store.js',
reader: {
type: 'tree',
root: 'items'
}
}
});
app.stores.event_store.load();
It probably stems from a lack of a fundamental understanding of how these models and stores interact but if anyone could help, good karma will be sent your way.
The full application can be found at it's GitHub repo.
-fetimo
The TreeStore expects hierarchical data
var data= {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
}]
}]
}
But the LocalStorageProxy is unable to match the model for this data structure.
I would use an AJAX request to load the "store.js" file using the localStorage directly to "store" the data blob.
Ext.Ajax.request({
url: 'store.js',
success: function(response, opts) {
localStorage.StoreJSBlob = response.responseText;
}
});
then your store will look something like this:
var store = new Ext.data.TreeStore({
model: 'Events',
root: localStore.StoreJSBlob,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
You just have to chain the events together correctly, as the async calls could trip you up

Categories