Question

我正在研究Sencha的Admin Dashboard示例，并尝试自定义“天气”面板。

我使用OpenWeatherMap的Current weather data API创建了一个JSON格式的网址。我无法使用tpl config将JSON数据绑定到Weather面板。我已经创建了一个ViewModel并在Component中调用它，但它没有用。

这是组件类;

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}&#176;</div>' +
            '<div>{weather.main}</div>' +
         '</div>'
});

对于通过OpenWeatherMap和snippet返回的JSON数据，这是link;

{
     "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
 }

谢谢，欢迎任何建议。

更新

我找到了this post，我尝试了同样的事情;从Ext.DataView扩展，设置代理类型jsonp并使用itemTpl配置。现在我可以绑定到JSON数据，但只能显示{main.temp}。好吗？

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}&#176;</div>' +
            '<div>{weather.description}</div>' +
         '</div>'
});

Answer 1

请查看以下几点以了解这一点。

Ext.Component类不适用于商店，因为您的代码无效。您可以在其他位置创建存储，然后从存储中检索数据并将组件的data属性设置为它。（请注意，对于Ext.Component，tpl属性适用于data属性：

var data = store.getData（）;

component.setData（数据）;
jsonP代理。
如果您要在商店中获取数据，那么更好的选择是从Ext.DataView扩展您的课程，因为它适用于商店。
值未在模板中正确显示，因为 weather 属性是一个对象数组，我们需要weather[0].icon之类的内容。因此，对于需要正确映射字段的模型，需要使用模型。（查看mapping属性。）
我为您的代码创建了Fiddle。图片未显示，因为网址未返回任何图片。休息是有效的。希望这对你有所帮助。

如何使用tpl配置将json数据绑定到屏幕？

1 个答案: