We Keep Coding

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

How to render Kendo UI grid from AJAX response data?

I have this code that gets json object from a static url and then renders grid. But I want to use json data retrived as AJAX response and then render grid using this response text. Because for practical deployment I can't use static URL.
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {url: "http://url/returnsjsonobject.php"}
//THIS GETS DATA FROM STATIC URL BUT I WANT TO READ DATA AS AJAX RESPONSE
//like read: somefunctioncall
//or like read: somevariable
},
schema: {
model: {
fields: {
id: {type: "string", editable: false},
name: {type: "string"}
}
}
},
pageSize: 20
},
height: 430
columns: [
{field: "id", title: "ID", width: "20px", hidden: "true"},
"name",
});
Thanks in advance for help and if you have any alternative method; I will be happy to try it.

Remember that transport.read.url does not have to be a constant but might be a function:
transport: {
read: {
url: function(options) {
return "somefunctionalcall?id=" + options.id,
},
dataType: "json"
}
or even define transport.read as a function:
transport: {
read: function (options) {
$.ajax({
dataType: "json",
url: "somefunctionalcall",
success: function (d) {
options.success(d);
}
});
}
}

How to exclude particular values in a extjs store

THe following code is my extjs store. I would like to exclude some particular value from this store.
For example the value such as "option 1", "option 2" would be exclude from the store, or when I retrieve this store and display in the input dropdown field.
How can I do it?
Thank you.
var input1store = new Ext.data.Store({
fields: [{name: 'name'}],
proxy:{
type: 'ajax',
url: 'www.requesturl.com?format=json&source1',
reader: {
type: 'json',
root: 'xml.result'
}
},
autoLoad:false,
sorters: [{property: 'name', direction: 'asc'}]
});

You can use a filter http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-filter
var input1store = new Ext.data.Store({
fields: [{name: 'name'}],
proxy:{
type: 'ajax',
url: 'www.requesturl.com?format=json&source1',
reader: {
type: 'json',
root: 'xml.result'
}
},
autoLoad:false,
sorters: [{property: 'name', direction: 'asc'}],
listeners: {
load: function() {
this.filter(function(rec){
var val = rec.get('name');
return val != 'option1' && val != 'option2';
});
}
}
});

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

ExtJS4 Ext.data.Store Load data from a function

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