am new to Sencha Touch. I tried to consume web service but its keeps saying "Unable to load data using the supplied configuration.Open in Browser". My store is
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
url: 'http://api.twitter.com/1/statuses/public_timeline.json',
reader: {
type: 'json',
rootProperty: 'errors'
}
}
}
});
and my model is
Ext.define('MyApp.model.MyModel', {
extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'message'
},
{
name: 'code'
}
]
}
});
Thanks for your help in advance.
Ext.define('MyApp.store.MyJsonPStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.MyModel'
],
config: {
autoLoad: true,
model: 'MyApp.model.MyModel',
storeId: 'MyJsonPStore',
proxy: {
type: 'jsonp',
/*url: 'http://api.twitter.com/1/statuses/public_timeline.json',*/Url not valid
reader: {
type: 'json',
rootProperty: 'errors'
}
}
}
});
Related
I have a grid with store, and I want to load on render or click a button, but when I try to load the grid, got an url is undefined error. I need to use Ext direct, so no url. What should I do?
Ext.define('My.view.Grid' ,{
extend: 'Ext.grid.Panel',
//...
store: 'MyStore',
//...
}
Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.JsonStore',
//...
model: 'My.model.MyModel',
proxy: {
type: 'direct',
directFn: Ext.direct.Class.function,
paramOrder: ['start', 'limit', 'sort', 'active'],
reader: {
type: 'json',
root: "data",
idProperty: 'id',
totalProperty: "all"
},
extraParams: {
active: 1
}
},
remoteSort: true,
sorters: ['name']
//...
Extend your store from Ext.data.Store:
Ext.define('My.store.MyStore', {
extend: 'Ext.data.Store',
// ...
});
If you see the source code of Ext.data.JsonStore, you will see that there is predefined an ajax proxy:
constructor: function(config) {
config = Ext.apply({
proxy: {
type : 'ajax',
reader: 'json',
writer: 'json'
}
}, config);
this.callParent([config]);
}
Model
Ext.define('MyDesktop.model.mail.MailFoldersModel', {
extend: 'Ext.data.Model',
requires: [
'Ext.data.field.String'
],
fields: [
{
type: 'string',
name: 'id'
},
{
type: 'string',
name: 'idParent'
},
{
type: 'string',
name: 'text'
}
]
});
My TreeStore
Ext.define('MyDesktop.store.mail.MailFoldersStore', {
extend: 'Ext.data.TreeStore',
requires: [
'MyDesktop.model.mail.MailFoldersModel'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
storeId: 'MailFoldersStore',
model: 'MyDesktop.model.mail.MailFoldersModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'http://url/mail/folders',
reader: {
type: 'json',
rootProperty: 'items',
successProperty: 'success'
}
},
root: {
text: 'root',
iconCls: 'mail-folders-owner'
}
}, cfg)]);
}
});
Store is autoloaded, all works correctly, store contains 11 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
If I set autoLoad to false and trying to load by manually - store is empty, 0 records.
var MailFoldersStore = Ext.create('MyDesktop.store.mail.MailFoldersStore', {
storeId: 'MailFoldersStore'
});
MailFoldersStore.load({
callback : function(records, operation, success) {
console.log(records);
}
});
What can be a reason for this behaviour?
I also has same problem. I am using Extjs 5.1. After googling I found one complex solution which needs us to modify the framework.
See the below link if it can help you.
http://www.sencha.com/forum/showthread.php?154823-listeners-quot-exception-quot-in-proxy.ajax-on-TreeStore-do-not-work
I should load date from server dynamically,
however, I have no idea how to change get parameters.
Here is my code.
I want to load store when the view is loaded, but the store get data from server
when the app is loaded. I need to change param according to user's input data.
[Store]
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel',
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
// extraParams: {
// man: '',
// },
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
},
});
[VIEW]
Ext.define('APP.view.MyListView', {
extend: 'Ext.navigation.View',
xtype: 'applistview',
requires: [
'Ext.Panel',
'APP.view.TopMenu',
'APP.view.TestListView',
'APP.config.Runtime',
],
fullscreen: true,
config: {
navigationBar: false,
fullscreen: true,
items: [
{ // Top Menu
xtype: 'topmenu',
},
{ // Main Menu
xtype: 'tlist',
itemId: 'myList',
store: 'MyTestStore',
},
{ // Bottom Banner
xtype: 'bottombanner',
},
]
},
initialize: function(){
var test = Ext.getStore('MyTestStore').load({extraParams:{man:'test'}});
console.log(test);
}
});
You can do this in two ways,
App default extra param set to 123
Ext.define('APP.store.MyTestStore', {
extend: 'Ext.data.Store',
requires: [
'APP.model.MyModel'
],
config: {
model: 'APP.model.MyModel',
autoLoad: false,
storeId : 'MyTestStore',
proxy: {
type: 'jsonp',
method: 'GET',
extraParams: {
man: '123'
},
url: 'http://test.com/api/test/',
reader: {
type: 'json',
rootProperty: 'apiList'
}
}
}
});
When loading the store you can change extra param like the following way
initialize: function(){
var test = Ext.getStore('MyTestStore').getProxy().getExtraParams().man= '567'
Ext.getStore('MyTestStore').load();
console.log(test);
}
In Another way you can change proxy url without setting extra param
initialize: function(){
var url = 'http://test.com/api/test/'; // your store proxy url
var modified = url+'parameter you get from user'
Ext.getStore('MyTestStore').getProxy().setUrl(modified);
Ext.getStore('MyTestStore').load();
console.log(test);
}
Please help me to solve this issue.. am spending too much time to sort it out..
I have a json file i want to display it in dataview.. i can display the parent values but cannot getting the child nodes
this is my json format
{
"items": [
{
"name": "Science Gallery",
"menu": [
{
"commenttext": "SC Sandwich"
},
{
"commenttext": "SC Toasted Sandwich"
},
{
"commenttext": "SC Panini"
},
{
"commenttext": "SC Ciabatta"
},
{
"commenttext": "SC Burrito"
}
]
}
]
}
This is my View
/**
* TouchCalendar.view.EventListPanel
*/
Ext.define('WinReo.view.PropertyDetailsView', {
extend: 'Ext.Panel',
requires: [
'Ext.dataview.List',
'Ext.layout.Fit'
],
alias: 'widget.propertydetailsview',
id:'propertydetailsview',
config: {
// title : 'Events List',
layout : 'fit',
store:'WinReo.store.PropertyDetails',
id:'propertydetailsview',
cls:'propertydetailscss',
},
initialize: function(){
var listadd = Ext.create('Ext.DataView', {
fullscreen: true,
id: 'ListePieces',
//itemTpl: listTemplate,
//data:[],
itemTpl: [
'{name}',
'<div>',
'<h2><b>Menu</b></h2>',
'<tpl for="menu">',
'<div>{item}</div>',
'</tpl>',
'</div>'
].join(''),
loadingText: 'Loading...',
store: storedetails
/*listeners:{
itemtap: function(record, index){
alert('hi');
}
}*/
});
this.add(listadd);
}
});
Here is my model
Ext.define('WinReo.model.PropertyDetailsModel', {
extend: 'Ext.data.Model',
// requires: ['WinReo.model.PropertyDetailsModelComments'],
config: {
fields: [
{name: 'name'},
{name: 'commenttext'},
{name: 'item'}
]
}
});
Here is my Store
Ext.define('WinReo.store.PropertyDetails', {
extend: 'Ext.data.Store',
requires: [
'WinReo.model.PropertyDetailsModel',
'Ext.data.Store',
'Ext.dataview.DataView',
'Ext.data.NodeStore',
'Ext.data.TreeStore'
],
config: {
storeId: 'propertydetails',
defaultRootProperty: 'items',
model: 'WinReo.model.PropertyDetailsModel',
autoLoad: true,
proxy: {
type: 'ajax',
method:'post',
url: 'resources/data/fullproperty.json',
//url: apiurl+'PropertyList.ashx?switch=GetPIP&reoid=',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});
Can i display this nested json with noram Model, is there any model association is needed?
please help...ur help is much appreciated..thanks in advance
Change your proxy setting in your store as follows. I removed 'rootProperty' and add 'record'
proxy: {
type: 'ajax',
method:'post',
url: 'resources/data/fullproperty.json',
//url: apiurl+'PropertyList.ashx?switch=GetPIP&reoid=',
reader: {
type: 'json',
record: 'items'
}
}
So, I have a problem using Sencha ExtJs 4.1 Associations.
I have something like:
Models
Ext.define('Tpl.model.User', {
extend: 'Ext.data.Model',
requires: ['Tpl.model.PostTemplate'],
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'postTemplate', type: 'int' }
],
associations: [
{ type: 'belongsTo', name: 'postTemplate', model:'Tpl.model.PostTemplate', associationKey: 'postTemplate', primaryKey: 'id', foreignKey: 'postTemplate' }
]
});
and
Ext.define('Tpl.model.PostTemplate', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'blah', type: 'string' }
],
associations: [
{ type: 'hasMany', model: 'Tpl.model.User' }
]
});
Stores
Ext.define('Tpl.store.Users', {
extend: 'Ext.data.Store',
model: 'Tpl.model.User',
autoLoad: true,
proxy: {
type: 'rest',
url: '../users',
reader: {
type: 'json',
root: ''
},
writer: {
type: 'json'
}
}
});
Ext.define('Tpl.store.PostTemplate', {
extend: 'Ext.data.Store',
model: 'Tpl.model.PostTemplate',
autoLoad: true,
proxy: {
type: 'rest',
//appendId: true,
url: '../postTemplates/',
reader: {
type: 'json',
root: ''
},
writer: {
type: 'json'
}
}
});
The problem is that I'm getting a POST like this:
{
"postTemplate": 1,
"id": 0,
"name": "foo"
}
But I need a POST like this:
{
"postTemplate": {
"id": 1,
"blah": "foo"
},
"id": 0,
"name": "bar"
}
Also, the assessor function like "setPostTemplate" doesn't exist and I think it should be created automatically.
Already tried to something like " record.data.postTemplate = (...) " but I got an infinite loop throwing an execption...
Can someone please advise? Also, if you need something else that could be useful for the answer let me know.
Thanks!
Out of the box the Associated objects are not serialized back to the server as you expect them . This issue has been brought up many times. The best thing might be to follow this thread:
http://www.sencha.com/forum/showthread.php?141957-Saving-objects-that-are-linked-hasMany-relation-with-a-single-Store
This thread talks about overriding getRecordData in the JSON writer class.