I contact you because I'm in a deadlock.
I try to get data from a extern web service with "ScriptTag" but it does not work because the web service returns simple json format (No JSONP).
Do you know if there is a another way to retrieve json using sencha ?
var helloWorld = new Ext.Application({
Parking: Ext.regModel('Parking', {
fields:[
{name:'parkingName'},
{name:'latitude'},
{name:'longitude'},
{name:'mapUrl'}
],
}),
launch: function() {
this.tabs = new Ext.TabPanel({
fullscreen: true,
dockedItems: [{xtype:'toolbar', title:'JSON Recovery'}],
tabBar: {
ui: 'light',
layout: {
pack: 'center'
}
},
items: [
{cls:'Page1', title:'Page1', html:'Page1'},
{
cls: 'list',
title: 'Page2',
xtype: 'list',
loadingText: 'Chargement',
itemTpl:'<div>{parkingName}</div>',
store: new Ext.data.Store({
autoLoad:true,
model: 'Parking',
proxy: {
type: 'scripttag',
url : 'http://walker.hotcity.lu/hotcity-central-server/webresources/parking/json?format-version=1_0&client-type=iPhone',
reader: {
type: 'json',
root: 'remoteObject'
},
}
}),
},
],
});
}
});
warning : Resource interpreted as Script but transferred with MIME type application/json.
error : Uncaught SyntaxError: Unexpected token :
Thank You.
Kevin.
What you are looking for is the Ajax Proxy. There are some examples in the docs about how to use it, and how to configure it. The default reader is JSON so as long as your model matches up with the information retrieved via JSON then you will be alright.
The other thing you should be aware of is that, JSONP can get around cross site scripting, but if you are not deploying to the walker.hotcity.lu domain, then the browser will not allow the request due to the same origin policy. The server will have to respond with the proper CORS headers to allow your app to access the data.
Related
I've created a localstorage store, and stored demo values in it following this tutorial:
http://sureshdotariya.blogspot.com/2013/03/understanding-local-storage-proxy-in.html
And it all works fine, I've viewed the store data in the resources in chrome and it is there, and when I load the page it loads fine, no errors, but it shows no data, here's my view code:
Ext.define('MyTest.view.SearchPanel', {
extend: 'Ext.Panel',
xtype: 'searchpanel',
config: {
layout: 'fit',
items: [
{
xtype: 'nestedlist',
title: 'Search Results',
displayField: 'Name',
store: {
storeId: 'UserStore',
fields: ['Name']
},
}]
}
});
What am I missing here? Can I use local storage store as the store for the nested list? And if yes then why it shows "No items found", I've added the store in app.js, I tried requiring it in this view but that did not work.
Your help is appreciated, thanks.
Ext.dataview.NestedList requires Ext.data.TreeStore instead of Ext.data.Store ( in the sample URL you gave ).
There are root, defaultRootProperty config required in Ext.data.TreeStore, and leaf property in items.
Of course you can set Ext.data.proxy.LocalStorage as proxy in Ext.data.TreeStore , try with these codes :
Ext.define('ListApp.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});
Ext.define('App.store.User', {
config: {
model: 'ListApp.model.User',
defaultRootProperty: 'items',
root: data
proxy: {
type: 'localstorage',
id: 'UserInfo'
}
}
});
I'm trying to update a field value from a grid row icon. But I get this error:
Uncaught Ext.data.proxy.Server.buildUrl(): You are using a ServerProxy but have not supplied it with a url.
I'm using a RestProxy, this is the store definition:
Ext.define('SF.store.Contents', {
requires: [
'SF.Config',
'SF.store.RestProxy'
],
extend: 'Ext.data.Store',
model: 'SF.model.Content',
autoLoad: false,
proxy: Ext.create('SF.store.RestProxy', {
url: (new SF.Config()).getApiBaseUrl() + "admin/contents"
}),
});
column code on GridPanel definition
....
store: 'Contents',
.....
{ xtype: 'actioncolumn', header: 'Action'
, width: 40
, items: [{ // Delete button
icon: '......./cancel.png'
, handler: function(grid, rowIndex, colindex) {
var record = grid.getStore().getAt(rowIndex);
record.set('status',6);
record.save(); //THIS CALL THROWS THE ERROR
grid.store.remove(record);
}
},......
In addition, the proxy is working fine for GET request. Does anyone knows what should I define on the proxy?
I've read the official doc but it is not clear for me.
You have to provide a proxy for you model. In the button´s handler you are calling the model's save method (SF.model.Content) then, your SF.model.Content model has to provide a proxy.
i'm trying to set a pagingtoolbar on my livesearchgridpanel.i'm getting the data over a Httpproxy ,so here is my store :
tempStore = new Ext.data.Store
({
groupField : default_groupby_s,
model : 'reportWorkspace',
allowFunctions : true,
autoSync : false,
pageSize : 20,
autoLoad : true,
remoteSort : false,
proxy : new Ext.data.HttpProxy
({
url : url_s,
actionMethods :
{
read : 'POST'
},
reader :
{
type : 'json',
root : 'workspace_report',
successProperty : 'success'
}
})
});
return tempStore ;
}
and here is my pagingtoolbar ,it will be included in my LivesearchgridPanel:
{
xtype: 'pagingtoolbar',
store: tempStore ,
dock: 'bottom',
pageSize:20,
displayInfo: true
}
the problem,it's that the pagingtoolbar is displaying pages correctly,but in the case of my grid,it displays ALL the data at the same time (in every page) . is it possible to do it without setting any starting point or limit in the autoload param ??
i just want to download all my data and then display it Correctly with pages
Any suggestion Please ?
I see several incosistencies:
LiveGrid was not built for paging at all but as an alternative to it.
ExtJS 4.1x no longer uses HTTP Proxy class but instead uses type: 'ajax' proxy config.
If you are going to page your data, you need to remote sort it, otherwise it won't make sense.
You have to make sure your grid panel and your pagingtoolbar refer to the same store instance. A common config for that in a grid panel is:
.
this.dockedItems = [
{
xtype:'pagingtoolbar',
store:this.store, // same store GridPanel is using
dock:'bottom',
displayInfo:true
}
];
I want to have a Navigation view. I am trying to populate the list in Sencha Touch using a JsonP proxy.
Here's the sample code snippet of what I have tried till now :
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype:'navigateview',
config : {
fullscreen:true,
styleHtmlContent:true,
scrollable:true,
items : [
{
title:'Navigation',
items : [
{
xtype:'list',
store: {
fields : ['title','author'],
proxy : {
type:'jsonp',
url:'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true,
},
itemTpl:'<div class="contact">{title} <strong>{author}</strong></div>',
listeners : {
itemtap : function(){
Ext.Msg.alert('Called');
}
}
}
],
}
]
}
});
But the problem is, my list is not getting populated. No items are being shown up in the list.
Also, I am constantly getting this error on console.
XMLHttpRequest cannot load
http://api.tinyhippos.com/xhr_proxy?tinyhippos_apikey=ABC&tinyhippos_rurl=list.php%3F_dc%3D1334462633038%26page%3D1%26start%3D0%26limit%3D25.
Origin http://localhost is not allowed by Access-Control-Allow-Origin.
Anyone please guide ? Anything that I am missing here ?
i was facing the same error when using AJAX request in cross domain.
have a look here
you have to make sure that the server part is configured properly using jsonp
as a first step identify if your application will run correctly when you disable web security in your browser
locate your chrome installation directory
then type in your cmd: chrome --disable-web-security
Your Ext.navigation.View object is containing one Ext.Component object (xtype not defined so defaulted to 'component') that is containing your list. If you put your list directly as an item of your view, it'll be rendered:
var view = Ext.define('MyApp.view.NavigateView', {
extend: 'Ext.navigation.View',
xtype: 'navigateview',
config : {
fullscreen: true,
styleHtmlContent: true,
scrollable: true,
items : [{
title: 'Navigation',
xtype: 'list',
store: {
fields: ['title','author'],
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
},
autoLoad:true
},
itemTpl: '<div class="contact">{title} <strong>{author}</strong></div>'
}]
}
});
Note1: Not sure why your code is not working.
Note2: The error your mentioned is not related to your code snippet
I'm trying to read the following string in an ExtJS combobox:
[
{"id":"1","company_name":"company a"},
{"id":"2","company_name":"company b"}
]
EDIT: I think there is some problem with the way my JSON data source is formatting the string because i dont have any root here. Is it important to have a root element?
Here is my Ext JS code:
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://somesite.com/someFile.php'
}),
reader: new Ext.data.JsonReader({},
[
{name: 'id', mapping: 'id'},
{name: 'company_name', mapping: 'company_name'},
]
)
});
var search = new Ext.form.ComboBox({
store : ds,
fieldLabel : 'Query string',
displayField : 'company_name',
typeAhead : true,
loadingText : 'Searching...',
pageSize : 5,
renderTo : Ext.getBody(),
width : 200,
mode: 'remote'
});
});
But unfortunately, i'm unable to get this to work. :( Please help!
I'm a n00b at JavaScript.
Yes, you'll need a root. See the docs for JsonReader, the 'root' config option is required.
Also: if you're not doing some cross-domain fetching of data, you probably shouldn't be using ScriptTagProxy. ScriptTagProxy requires that the server wrap the json-encoded data in a function call. If you're just calling back your same server, use HttpProxy instead.