How to bind json data to screen with tpl config? - json

Question

I'm working on Sencha's Admin Dashboard sample and trying to customize 'Weather' panel.
I've created a JSON format url with OpenWeatherMap's Current weather data API. The thing I can't bind JSON data to Weather panel with tpl config. I've created a ViewModel and called it within Component but it did not worked as well.
Here is the component class;
Ext.define('OWeb.view.dashboard.Weather', {
extend: 'Ext.Component',
xtype: 'weather',
baseCls: 'weather-panel',
border: false,
height: 80,
store: {
proxy: {
type: 'ajax',
url: 'http://api.openweathermap.org/data/2.5/weather?q=Antalya,TR&appid=9b59049894d42af608baf69f869b9ace&units=metric',
reader: {
type: 'json'
}
},
autoLoad: true
},
tpl: '<div class="weather-image-container"><img src="resources/img/{icon}" alt="{weather.description}"/></div>'+
'<div class="weather-details-container">' +
'<div>{main.temp}°</div>' +
'<div>{weather.main}</div>' +
'</div>'
});
And this is link for JSON data which returns via OpenWeatherMap and snippet;
{
"coord": {
"lon": 30.72,
"lat": 36.77
},
"weather": [{
"id": 800,
"main": "Clear",
"description": "clear sky",
"icon": "01d"
}],
"base": "stations",
"main": {
"temp": 25,
"pressure": 1015,
"humidity": 23,
"temp_min": 25,
"temp_max": 25
},
"visibility": 10000,
"wind": {
"speed": 5.7,
"deg": 320
},
"clouds": {
"all": 0
},
"dt": 1507184400,
"sys": {
"type": 1,
"id": 6028,
"message": 0.0025,
"country": "TR",
"sunrise": 1507175759,
"sunset": 1507217657
},
"id": 323776,
"name": "Antalya",
"cod": 200
}
Thanks, any advice is welcome.
UPDATE
I've found this post and I tried same thing; extend from Ext.DataView, setting proxy type jsonp and using itemTpl config. Now I can bind to JSON data but only can displaying {main.temp}. Any idea please?
Ext.define('OWeb.view.dashboard.Weather', {
//extend: 'Ext.Component',
extend: 'Ext.DataView',
xtype: 'weather',
baseCls: 'weather-panel',
border: false,
height: 80,
store: {
proxy: {
type: 'jsonp',
url: 'http://api.openweathermap.org/data/2.5/weather?q=Antalya,TR&appid=9b59049894d42af608baf69f869b9ace&units=metric',
reader: {
type: 'json'
}
},
autoLoad: true
},
itemTpl: '<div class="weather-image-container"><img src="{weather.icon}" alt="{weather.description}"/></div>'+
'<div class="weather-details-container">' +
'<div>{main.temp}°</div>' +
'<div>{weather.description}</div>' +
'</div>'
});

Answer 1

Please look at the points below to understand this.
Ext.Component class does not work with store because of which your code was not working. You could have created the store elsewhere and then retrieved the data from store and set the data property of the component to it. (Note that for Ext.Component, the tpl property works with data property:
var data = store.getData();
component.setData(data);
jsonP proxy is needed only when you need to fetch data from a different domain.
If you are getting data in a store then better option is to extend your class from Ext.DataView because it works with store.
The values were not properly showing in the template because weather property was an array of objects and we needed something like weather[0].icon. So for this, Model was required with fields properly mapped.(Look at the mapping property.)
I have created a Fiddle for your code. Image is not showing because url is not returning any image. Rest is working. Hope this is helpful to you.