I am trying to use a JSON file to populate a grid but the JSON file is complex.
Below is my JavaScript File and below that is link to my JSON file. Note that the fields I am experimenting with in the JSON file are located at the top.
I have tried everything but I can only get 'server_time' if I remove the 'root' and 'record' from the 'reader', so that proves the it works on some level but I can't get anything else no matter which configuration I try.
Please help me solve this issue. Thanks in Advance!
Link to JSON File LINK
ExtJS Code
Ext.onReady(function(){
Ext.define('Jobs', {
extend: 'Ext.data.Model',
fields: [
{name: 'op_comm_status'},
{name: 'job_category_level_two'},
{name: 'op_description'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Jobs',
proxy: {
type: 'ajax',
url : 'results/company_list.json',
reader: {
type: 'json',
root: 'jobs',
record: 'job'
}
}
});
store.load();
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
header: 'Status',
dataIndex: 'op_comm_status'
},{
header: 'Category Level Two',
dataIndex: 'job_category_level_two'
},{
header: 'Description',
dataIndex: 'op_description'
}]
});
grid.render(Ext.getBody());
})
Not really a solution, I switched to XML instead and had it working within 5 minutes
try below code :
var proxy = new Ext.data.HttpProxy({url: "your url"});
var reader = new Ext.data.JsonReader({
root: 'rows',
totalProperty: 'count',
id: 'id' });
var store = new Ext.data.Store({
proxy: proxy,
reader: reader,
remoteSort: true
});
you can include other attribute as required.
Related
Below is the code where I try to load some records using JSon Reader in the store.
I am unable to see this on the Grid.
Can you please point me out what am I missing as I don't want to use proxy/url for JSon.
var itemsPerPage = 10;
Ext.Loader.setConfig({enabled: true});
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging'
]);
Ext.define('Assemble', {
extend: 'Ext.data.Model',
fields: [
{name: 'lot_no', type: "string"}
],
idProperty: 'lot_no'
});
Ext.onReady(function() {
Ext.QuickTips.init();
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
proxy:{
type: 'ajax',
reader: {
type: 'json',
root: 'result',
model: Assemble
}
}
});
store.loadData(Ext.decode(jsonString));
console.log(store);
var pagingToolbar = Ext.create('Ext.PagingToolbar',{
pageSize: itemsPerPage,
store: store,
displayInfo: true,
displayMsg: ' {0}-{1}，{2}',
emptyMsg: "empty."
});
// create the Grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
disableSelection: true,
loadMask: true,
columns: [
{
text : 'LOT_NO',
flex : 1,
sortable : true,
dataIndex: 'lot_no'
}
],
bbar : pagingToolbar,
renderTo: 'grid',
viewConfig: {
stripeRows: true,
enableTextSelection: true
}
});
store.loadPage(1);
});
Proxy has to use with url. So, you can't use the proxy like that. I removed the proxy, put the model in store and you have to load objects into store, but in your case contained rootProperty('result', I only get the main objects or you can remove the 'result' from the jsonString). Then, it worked. Chck this fiddle:
https://fiddle.sencha.com/#fiddle/11or
var jsonString = '{"result":[{"lot_no":"MT6261"},{"lot_no":"MT6262"},{"lot_no":"MT6263"}]}';
// create the data store
var store = Ext.create('Ext.data.Store', {
pageSize: itemsPerPage,
model: 'Assemble'
});
store.loadData(Ext.decode(jsonString).result);
Why are you even using a reader? Your data is local so just decode the string and pass in what you want:
https://fiddle.sencha.com/#fiddle/11qc
Also, your data is local so no need for a paging toolbar. In Ext JS 5+ the grid will use the buffered renderer (if the grid has a defined size from height/width configs or from a parent layout) so loading all the data into the store will not affect performance (other than creating the records). The grid will only render what is viewable plus a few on either side.
I'm trying to override the default parameter name for limitParam in proxy for the Store. I want to make a JSONP call to http://search.twitter.com/search.json?q=kathmandu&rpp=2 but instead of setting rpp directly I want to map it to limitParam and set it's value. But it's not setting through limitParam. The reason I'm doing is the parameter keys store sends (sort, dir, etc) do not match the parameters on the server side (which I've no control over). Thanks in advance.
Ext.require('Ext.grid.View');
Ext.require('Ext.util.Point');
Ext.application({
name: 'HelloExt',
launch: function() {
/*Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});*/
console.log('ok1');
Ext.define('Video', {
extend: 'Ext.data.Model',
fields: ['from_user', 'from_user_id']
});
var myStore2 = Ext.create('Ext.data.Store', {
model: 'Video',
storeId : 'restfulStore',
proxy: {
type: 'jsonp',
url : 'http://search.twitter.com/search.json?q=kathmandu',
reader: {
type: 'json',
//root: 'data.items'
root: 'results'
},
limitParam: 'rpp',
pageParam: 'page'
},
listeners: {
load: function(store, records) {
Ext.each(records, function(rec) {
console.log(rec.get('from_user'));
});
}
},
sorters: [{
property: 'from_user',
direction: 'DESC'
}, {
property: 'from_user_id',
direction: 'ASC'
}],
//autoLoad: true,
remoteSort: true
});
var p = myStore2.getProxy();
p.limitParam = 2;
myStore2.load();
console.log('loads anyway??? loaded the store ...');
Ext.create('Ext.grid.Panel', {
title: 'Restful Grid',
store: Ext.data.StoreManager.lookup('restfulStore'),
columns: [
{header: "From User", width: 200, sortable: true, dataIndex: 'from_user'},
{header: "From User ID", width: 200, sortable: true, dataIndex: 'from_user_id'}
],
height: 400,
width: 400,
renderTo: Ext.getBody()
});
console.log('store loaded!!');
}
});
Your proxy configuration is fine for what you want to do. The problem is in the way you load the store. You should not change limitParam which is really the config option for the name of the param. To affect the number of results, use the limit option of the load method, that you can also configure in the store with the pageSize option.
So, remove this:
var p = myStore2.getProxy();
p.limitParam = 2;
And instead, use the limit option when loading the store:
myStore2.load({
limit: 2
});
Alternatively, you can set this in the store config with the pageSize option:
Ext.create('Ext.data.Store', {
// ...
pageSize: 2
,autoLoad: true
});
You can mix both by setting a default with pageSize, and changing it at loading time with limit.
As a side note, the tweeter API doesn't seem to support sorting, so your sorters configuration won't have any effect on the returned results. You should switch remoteSort to false to have the returned results sorted on the client side according to your configuration.
This is the json response I am getting. I checked with JSONLINT and it says valid, but if you notice it's only giving me value without the heading of the column... the column name is "States".
{"myTable":["VA","CA","CO","OK","PA","TX"]}
Would it be possible to use this Json to load in my combobox
items: [{
xtype: 'combo',
id: 'iccombo',
scope: this,
store: this.store,
mode: 'remote',
minChars: 0,
fieldLabel: 'Short State',
displayField: 'States',
valueField: 'States',
typeAhead: true,
name: 'States',
labelWidth: 125,
anchor: '95%'
},
this is my store
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'States' }],
proxy: {
type: 'ajax',
url: 'GetState/getS',
reader: {
type: 'json',
root: 'myTable'
idProperty: 'States'
}
}
});
Out of the box Ext has the Array Reader which is almost a match but a tweak is required for the data format you have. The Array Reader can be customized to take your data format and turn it into the format needed. This kind of customization is common for many services that cannot be modified at the server level and so we can easily adjust at the UI level thanks to the Ext JS data framework.
Here is a custom reader that you could use as well as an implementation based on your example and a quick loop that shows the data by record:
/**
* A customized reader to convert a list to an array for the
* ArrayReader to take
*/
Ext.define('Ext.ux.data.reader.JsonList', {
extend: 'Ext.data.reader.Array',
alias : 'reader.jsonlist',
root: 'myTable',
/**
* this is really the guts of the change
* convert an array of strings to an array of arrays of strings
*/
extractData: function (root) {
var data;
if (Ext.isArray(root) && !Ext.isArray(root[0])) {
root.forEach(function (val, idx, all) {
/* turn the value into an array */
all[idx] = [val];
})
}
data = root;
/* hand the array of arrays up to the ArrayReader */
return this.callParent([data]);
}
});
store = Ext.create('Ext.data.Store', {
autoLoad: true,
id: 'OurData',
scope: this,
fields: [{ name: 'State' }],
proxy: {
/* change this back to ajax to get server data */
type: 'memory',
url: 'GetState/getS',
reader: {
type: 'jsonlist'
}
},
/* temp data for simplified demo code */
data: {"myTable":["VA","CA","CO","OK","PA","TX"]}
});
/* just to demo that there are six records with State as the field name: */
store.each(function (rec, id, total) {
console.log(rec.get('State'))
});
Is there a way to load different json files on demand(click), somehow changing the URL. Same store, same model, just changing the url and load().
Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
'name', 'email', 'phone'
]
});
var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
type: 'ajax',
url : 'app/kontaktGrid.json',
reader:{
type:'json',
root: 'items'
}
}
});
buttons: [{
text: 'Load1',
handler:function(){
myStore.load().url('app/kontaktGrid1.json');
}
},{
text: 'Load2',
handler:function(){
myStore.load('app/kontaktGrid2.json');--
returning POST 405 Method not allowed
}
}]
both myStore.load().url('app/kontaktGrid1.json'); or myStore.load('app/kontaktGrid2.json'); do not update the store URL for retriving data.
In order update the url, you need to do the following:
myStore.getProxy().url = "/new-url";
myStore.load();
The first statement modifies the store's proxy url. The load() which is then called, loads the new data to the store.
i have a extjs TreePanel that i need to load using json data (cross-domain call) returned from my Ext.data.JsonStore call. That works perfectly. I just cant find a way to use the returned jsonStore to load the treepanel. Any ideas? I am real desperado.
Thanks everyone!
code snippet:
var store = new Ext.data.JsonStore({
root: 'topics',
totalProperty: 'totalCount',
idProperty: 'threadid',
remoteSort: true,
fields: [
'title', 'forumtitle', 'forumid', 'author',
{name: 'replycount', type: 'int'},
{name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
'lastposter', 'excerpt'
],
proxy: new Ext.data.ScriptTagProxy({
url: 'http://other.domain/test.aspx'
})
});
// Now i need to use that store to load the tree...
var Tree = Ext.tree;
var tree = new Tree.TreePanel({
useArrows: true,
autoScroll: true,
animate: true,
enableDD: true,
containerScroll: true,
border: false,
loader: new Tree.TreeLoader({ dataUrl: '????' })
//.....
});
Help!
You would have to add a load listener to the store and manually add tree nodes from the loaded data into the tree, the tree does not support stores directly, remember that tree's are hierarchical and stores and pretty flat.