I am new to sencha touch and trying to learn. Build a small app that loads a JSON string from a file. When I run my app on localhost, dataview displays properly, but when I run the same app from my shared hosting account, I get a "loading" graphic in an infinite loop and no data is displayed. You can reproduce the "loading" graphic using this URL:
Reproduce Error
My .js code:
var buglist;
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function () {
Ext.regModel('bugs', {
fields: ['bg_id', 'bg_short_desc', 'bg_reported_date']
});
var productsList = new Ext.DataView({
store: new Ext.data.Store({
model: 'bugs',
proxy: {
type: 'ajax',
url: 'bugs.json',
reader: {
type: 'json',
root: 'd'
}
},
autoLoad: true
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="item">',
'<p>{bg_id}</p>',
'<p>{bg_short_desc}</p>',
'</div>',
'</tpl>'
),
itemSelector: "div.item",
fullscreen: true
});
}
});
My JSON string:
{"d":[{"bg_id":3,"bg_short_desc":"Reports - Efficiency - time from order to shipment","bg_reported_date":"\/Date(1261589913930)\/"},{"bg_id":5,"bg_short_desc":"Remove SKU 375906","bg_reported_date":"\/Date(1262195615067)\/"}]}
Please help.
Thanks
Sajjad
The bg_reported_date, why are you wrapping it in Date()? Just use type: 'date' and dateFormat : 'U' in your field for bg_reported_date Model.
Have you looked at the reponse? Did it return? Error?
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 need to reload my chart's json store automatically on interval of 2 minutes.
This is my code:
tab = new Ext.Panel({
id: "id-" + node.id,
closable: true,
title: node.attributes.text,
layoutConfig: {
columns: 3
},
defaults: {
frame: true,
height: 230,
border: true
},
items: [
new Ext.chart.LineChart({
store: new Ext.data.JsonStore({
url: 'dashboard/CantServicios',
root: 'cantservicio',
autoLoad: true,
ields: ['NOMBRE_SERVICIO', 'CANT']
}),
xField: 'NOMBRE_SERVICIO',
yField: 'CANT',
width: 840
})
]
});
How can I do that ?
You can do this using Ext.util.TaskRunner
http://docs.sencha.com/extjs/3.4.0/?mobile=/api/Ext.util.TaskRunner
So if you look at the sample in the docs link above you should see that you can easily define a function that just performs a load on your store and then it's just a matter of using that in as the run config option.
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.
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.
I'm trying to make a DataView work (on Ext JS 2.3).
Here is the jsonStore, which seems to be working (it calls the server and gets a valid response).
Ext.onReady(function() {
var prefStore = new Ext.data.JsonStore({
autoLoad: true, //autoload the data
url: 'getHighestUserPreferences',
baseParams: {
userId: 'andreab',
max: '50'
},
root: 'preferences',
fields: [{
name: 'prefId',
type: 'int'
},
{
name: 'absInteractionScore',
type: 'float'
}
]
});
Then the xtemplate:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="{url}" title="{name}"></div>',
'<span class="x-editable">{shortName}</span>
</div>',
'</tpl>',
'<div class="x-clear"></div>'
);
The panel:
var panel = new Ext.Panel({
id: 'geoPreferencesView',
frame: true,
width: 600,
autoHeight: true,
collapsible: false,
layout: 'fit',
title: 'Geo Preferences',
And the DataView
items: new Ext.DataView({
store: prefStore,
tpl: tpl,
autoHeight:true,
multiSelect: true,
overClass:'x-view-over',
itemSelector:'div.thumb-wrap',
emptyText: 'No images to display'
})
});
panel.render('extOutput');
});
What I get in the page is a blue frame with the title, but nothing in it.
How can I debug this and see why it is not working?
Your store doesn't match your template, you copied this just from examples didn't you :P
The items in the template, {name} etc refer to fields in the store, which in your case is just prefId and absInteractionScore.
What that example template expects is a name and a url to an image which it then constructs some and an for.