JSONP request not working - json

Hi i'm new to Sencha and i'm try to set json request data to filedset. But it does not work. Please help me i cannot find the error.
this is my json request data:
{"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}}
And this is the code.
Ext.define('AIOS_vis.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar'
],
config: {
listeners: {
activate: function() {
alert('gr');
Ext.data.JsonP.request({
url: 'http://localhost:8080/mock/GetCtPwer.php',
method: 'POST'
callbackkey: 'callback',
params: {
tap_id: 1
},
scope: this, /// fix handler scope
callback: function (response, value, request) {
var wattComponent = Ext.getCmp('watt');
wattComponent.setValue(value.response.electric_power);
var ampereComponent = Ext.getCmp('ampere');
ampereComponent.setValue(value.response.electric_current);
},
failure: function (response, request) {
Ext.Msg.alert(response);
}
});
}
},
tabBarPosition: 'bottom',
items: [
{
title: 'Home',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Visual',
},
{
xtype: 'fieldset',
instructions: 'Last Update: 2014/02/06:12:45:23',
items: [
{
xtype: 'button',
text : 'current',
height: '40px',
},
{
xtype: 'textfield',
id: 'watt',
label: 'Wattage (W):',
text: '1890.9W'
}, {
xtype: 'textfield',
id: 'ampere',
label: 'Amperage (A):',
text: '18.91A'
}]
},
{
xtype :'titlebar',
style: 'background:#484848',
title : 'power</br>123.4Wh',
height: '100px'
}
]}
]
},
});

Change your webservice url to (for example) http://yoururl.com:8080/mock/GetCtPwer.php?jsonp=parseResponse
and make sure your webserice is responding this:
parseResponse({"response":{"electric_current":103.7506250769956,"electric_power":120.62350489414762}})
you can change "parseResponse" to whatever you want.

Related

Not Able to load data into a listview from store in Sencha touch

I am a beginner in sencha programming trying to build an app that takes in data from a remote server and displays it as a list in my app. I am trying to load data from a JSON store into a listview. My Store Code is:
Ext.define('RestaurantGlobal.store.CategoryColumnsStore', {
extend: 'Ext.data.Store',
requires: [
'RestaurantGlobal.model.CategoryColumns'
],
config: {
model: 'RestaurantGlobal.model.CategoryColumns',
storeId: 'CategoryColumnsStore',
proxy: {
type: 'ajax',
url: 'http://eatpunjab.gramapp.in/Data/?Model=Category&All=True',
reader: {
type: 'json',
rootProperty: 'fields'
},
autoLoad: true
}
}
});
My Model Code is:
Ext.define('RestaurantGlobal.model.CategoryColumns', {
extend: 'Ext.data.Model',
uses: [
'RestaurantGlobal.model.BaseModelColumns'
],
config: {
fields: [
{
name: 'Name',
type: 'string'
},
{
name: 'Image',
type: 'string'
}
],
}
});
and my view code is:
var categorystore = Ext.create("RestaurantGlobal.store.CategoryColumnsStore");
Ext.define('RestaurantGlobal.view.CategoriesPage', {
extend: 'Ext.Panel',
config: {
styleHtmlCls: 'maincontainer',
styleHtmlContent: true,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
flex: 0.5,
docked: 'top',
title: 'Menu'
},
{
xtype: 'list',
flex: 4,
cls:'customcontainer',
margin: '0 10 0 10',
itemTpl: [
'<img src="http://eatpunjab.gramapp.in/media/{Image}" width="40" height="40"/><h2>{Name}</h2>'
],
scrollToTopOnRefresh: false,
store: categorystore
},
]
}
});
When I open the app in my browser, I get a blank listview.
What is missing in my code that is causing the data to not be loaded into the listview?
autoLoad is a config option for the store, but you've put it in the proxy.

JSON response not assigned to textfield text

When i call the Method,JSON response not assigning to the textfield ,Here i mentioned through the id. But its not assigning to the text field text.
JSON response
Method
function viewgiftdetails(itemid,p,t) {
Ext.Ajax.request({
url : 'http://192.168.1.155:8181/WishList/ShowItemsByItemID/userID=3/itemID=19',
method: "GET",
useDefaultXhrHeader: false,
withCredentials: true,
success: function (response) {
var respObj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert("Success", respObj[0].itemName);
Ext.getCmp('myitemname').setData(respObj[0].itemName)
Ext.getCmp('myitemdesc').setData(respObj[0].describe)
Ext.getCmp('myitemprice').setData(respObj[0].price)
},
failure: function (response) {
alert(response.responseText);
}
});
}
PANEL
var viewitemspnl = Ext.create('Ext.Panel', {
id: 'viewitemspnl',
scrollable:'vertical',
height: '100%',
width: '100%',
items: [{
xtype: 'toolbar',
ui:'light',
docked: 'top',
title: 'My items',
items: []
},
{
xtype: 'textfield',
name : 'itemName',
id:'myitemname',
label: 'Item Name',
useClearIcon: true
},
{
xtype: 'textfield',
name : 'itemdesc',
id:'myitemdesc',
label: 'Description',
useClearIcon: true
},
Whats wrong with my code?PLease help to solve this issue
I think it should not be
Ext.getCmp('myitemname').setData(respObj[0].itemName);
Because their is no any method setData() for the textfield.
Try this
Ext.getCmp('myitemname').setValue(respObj[0].itemName);

Sencha touch 2 json + twitter = Access-Control-Allow-Origin

i have this code:
Ext.define('myApp.view.Twitter',{
extend: 'Ext.TabPanel',
xtype: 'twitter',
requires: [
'Ext.dataview.List',
'Ext.data.reader.Json',
'Ext.data.Store',
'Ext.Map'
],
config: {
title:'Twitter',
iconCls: 'twitter2',
items: [
{
xtype: 'list',
title: 'Tweets',
itemTpl : [
'<div>',
'<div>',
'<img class="tweetAvatar" src="{profile_image_url}"/>',
'</div>',
'<div>',
'{text}<br/>',
'From:<a class="btnTweet" href="http://twitter.com/{screen_name}">#{screen_name}</a>',
'</div></div>'
],
disableSelection: true,
store: {
autoLoad: true,
fields: [
{
name:'text'
},
{
name: 'screen_name',
mapping: 'user.screen_name'
},
{
name: 'profile_image_url',
mapping: 'user.profile_image_url'
}
],
proxy: {
type: 'ajax',
url: 'http://api.twitter.com/1/statuses/user_timeline/my_name.json?count=25&include_rts=1&callback=?',
//url: 'data.json',
reader: {
type: 'json'
}
}
}
},
{
title: 'Map',
xtype: 'map',
useCurrentLocation: true,
mapOptions: {
zoom: 12
},
listeners: {
maprender: function(extMapComponent, googleMapComp){
var marker = new google.maps.Marker({
position: position = new google.maps.LatLng (extMapComponent._geo._latitude,extMapComponent._geo._longitude),
map: googleMapComp
});
}
}
}
]
}
});
And the browser returns:
OPTIONS http://api.twitter.com/1/statuses/user_timeline/my_name.json?count=25&include_rts=1&callback=?&_dc=1369506479735&page=1&start=0&limit=25 405 (Method Not Allowed) Connection.js:319
XMLHttpRequest cannot load http://api.twitter.com/1/statuses/user_timeline/my_name.json?count=25&include_rts=1&callback=?&_dc=1369506479735&page=1&start=0&limit=25. Origin http://m.my_domain.com is not allowed by Access-Control-Allow-Origin.
some solution?
Just replace your proxy with a jsonp proxy. I've also modified the url and removed the callback key. Sencha will automatically insert the callback key when you use jsonp.
proxy: {
type: 'jsonp',
url : 'http://api.twitter.com/1/statuses/user_timeline/my_name.json?count=25&include_rts=1'
}

Sencha Touch 2 Dynamic Items Array

In the following example, I would like to replace the hard-coded items array with a call to a jsonstore with with same items read dynamically. I have tried referencing the store through xtype but get an error that Object has no method 'getItemId' - please let me know what I am doing wrong and many thanks for your help
Ext.define("MyApp.view.Main", {
extend: 'Ext.ux.slidenavigation.View',
requires: [
'Ext.Container',
'Ext.MessageBox',
'Ext.Panel',
'Ext.Toolbar',
'Ext.event.publisher.Dom'
],
config: {
fullscreen: true,
slideSelector: 'x-toolbar',
selectSlideDuration: 200,
list: {
maxDrag: 400,
width: 200,
items: [{
xtype: 'toolbar',
docked: 'top',
ui: 'light',
title: {
title: 'Navigation',
centered: false,
width: 200,
left: 0
}
}]
},
/***************************************************************/
/* Want to replace this items array with dynamic call to store */
/***************************************************************/
items: [{
title: 'Item 1',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 1',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
},{
title: 'Item 2',
slideButton: {
selector: 'toolbar'
},
items: [{
xtype: 'toolbar',
title: 'Item 2',
docked: 'top'
},{
xtype: 'panel',
html: '<img src="resources/images/guide.jpg" width="100%" />'
}]
}]
}
Store sample
Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
json sample
[
{
"title": "Item 1",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 1',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
},
{
"title": "Item 2",
"slideButton": "{selector: 'toolbar'}",
"items": "[{xtype: 'toolbar',title: 'Item 2',docked: 'top'},{xtype: 'panel',html: '<img src='resources/images/guide.jpg' width='100%' />'}]",
"handler": ""
}
]
Assuming your store is loading correctly, you can get a reference to it by calling
Ext.getStore('navStore')
or by assigning your store to a variable:
var yourStore = Ext.define('MyApp.store.Navigation', {
extend: 'Ext.data.Store',
alias: 'widget.navstore',
requires: [
'MyApp.model.Navigation'
],
config: {
model: 'InspectionApp.model.Navigation',
storeId: 'navStore',
proxy: {
type: 'ajax',
url: '/path/to/navigation.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
grouper: {
property: 'group',
sortProperty: 'groupOrder'
}
}
});
To populate the items object I would put it in a container:
{
xtype: 'container',
id: 'container_id',
}
then
for (var i = 0; Ext.getStore('navStore').getCount(); ++i){
var record = Ext.getStore('navStore').getAt(i);
var myComponent = Ext.create(...
//make the component you want to add with the data from the record
);
Ext.ComponentQuery.query('#container_id')[0].add(myComponent);
}

JSON data not showing when grid in dynamic tab?

My grid isnt showing data when put to tab. This grid, store, model, JSON are working when renderd to body or div, or as a part of a viewport. Only not showing when put in tab, that is also created using JSON and Tree! This is a (sometimes)working example. I cant figure it out, maybe scope bug ... Please help!
Ext.Loader.setConfig({ enabled: true });
Ext.require(['*']);
Ext.require('app.kontakt');
Ext.require('app.ponude');
Ext.require('app.gridStore');
Ext.onReady(function() {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
},{
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items:[
myTree
]
},{
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype:'tabpanel',
id:'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'app/myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners:{
itemclick: function(view,record,item,index,e){
if(record.isLeaf() && record.raw.tabCls){
var tabId=record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if(existingTab){
mainPanel.setActiveTab(existingTab);
}else{
mainPanel.add(Ext.create(record.raw.tabCls,{id:tabId})).show();
}
}
}
}
});
Ext.define("app.kontakt",{
extend:"Ext.panel.Panel",
name:"kontakt",
title:"Kontakt",
layout:"border",
closable:true,
border: false,
items:[
{
region: 'north',
collapsible: false,
split:true,
layout:"fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid.json'
});
}
},{
text: 'Load2',
handler:function(){
myStore.load({
scope : this,
url : 'app/kontaktGrid1.json'
});
}
}]
},{
region: "center",
xtype:"grid",
id:"kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [
{header: 'name', dataIndex: 'name',flex:1},
{header: 'email', dataIndex: 'email', flex:1},
{header: 'phone', dataIndex: 'phone', flex:1}
]
}
]
});
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 : '',
reader:{
type:'json',
root: 'items'
}
},
autoLoad:false
});
JSON for TREE
{
children: [
{ text:"KLIJENTI", expanded: true,
children: [{ text:"Kontakt", leaf: true , tabId : "tab1", tabCls: "app.kontakt"}]
}
]
}
JSON for GRID
{'items':[
{"name":"Lisa", "email":"lisa#simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart#simpsons.com", "phone":"555--222-1234"}
]}
ok... i have tes your code just by copy paste to my firebug (of course with edit the json urls),
and i got an error.... This is because the program flow...
if it was your script, and put them in a single file, you specify a grid before the store
here code works for me no error...
Ext.onReady(function () {
Ext.create('Ext.Viewport', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},
items: [{
region: 'north',
collapsible: false,
split: true,
height: 60
}, {
region: 'west',
collapsible: false,
title: 'IZBORNIK',
split: true,
width: 200,
layout: 'fit',
items: [myTree]
}, {
region: 'center',
layout: 'fit',
border: false,
items: [{
xtype: 'tabpanel',
id: 'mainTabPanel'
}]
}]
});
});
var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'myTree.json',
},
reader: {
type: 'ajax',
root: 'nodes',
record: 'leaf'
}
});
var myTree = Ext.create('Ext.tree.Panel', {
store: store,
rootVisible: false,
border: false,
listeners: {
itemclick: function (view, record, item, index, e) {
if (record.isLeaf() && record.raw.tabCls) {
var tabId = record.raw.tabId;
var mainPanel = Ext.getCmp('mainTabPanel');
var existingTab = Ext.getCmp(tabId);
if (existingTab) {
mainPanel.setActiveTab(existingTab);
} else {
mainPanel.add(Ext.create(record.raw.tabCls, {
id: tabId
})).show();
}
}
}
}
});
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: '',
reader: {
type: 'json',
root: 'items'
}
},
autoLoad: false
});
Ext.define("app.kontakt", {
extend: "Ext.panel.Panel",
name: "kontakt",
title: "Kontakt",
layout: "border",
closable: true,
border: false,
items: [{
region: 'north',
collapsible: false,
split: true,
layout: "fit",
height: 100,
border: false,
buttons: [{
text: 'Load1',
handler: function () {
myStore.load({
scope: this,
url: 'grid.json'
});
}
}, {
text: 'Load2',
handler: function () {
myStore.load({
scope: this,
url: 'grid1.json'
});
}
}]
}, {
region: "center",
xtype: "grid",
id: "kontaktGrid",
layout: "fit",
store: myStore,
border: false,
columns: [{
header: 'name',
dataIndex: 'name',
flex: 1
}, {
header: 'email',
dataIndex: 'email',
flex: 1
}, {
header: 'phone',
dataIndex: 'phone',
flex: 1
}]
}]
});