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
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.
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);
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'
}
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);
}
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
}]
}]
});