如何使用tpl配置將json數據綁定到屏幕？

Question

我正在研究Sencha的Admin Dashboard樣品並試圖定製'天氣'面板。

我已經使用OpenWeatherMap的Current weather data API創建了JSON格式的網址。我無法通過tpl配置將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>' 
}); 

這是link用於經由OpenWeatherMap和片斷返回JSON數據;

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

謝謝，任何建議是值得歡迎的。

---

UPDATE

我發現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

請看下面的要點來理解這一點。

1. Ext.Component類不適用於商店，因爲您的代碼無法正常工作。您可以在其他地方創建商店，然後從商店檢索數據，並將該組件的data屬性設置爲它。 （請注意，Ext.Component的tpl財產與data物業工作：

   VAR數據= store.getData（）;

   component.setData（數據）;只有當你需要

2. jsonP代理需要從不同的域中獲取數據

3. 如果您在商店獲取數據，那麼更好的選擇是從Ext.DataView擴展您的課程，因爲它可以與商店配合使用。

4. 該值未在模板中正確顯示，因爲天氣屬性是一組對象，我們需要類似weather[0].icon的東西。所以對於這一點，模型是必需的，正確映射了字段。（請查看mapping屬性。）

5. 我已爲您的代碼創建了一個Fiddle。圖片沒有顯示，因爲url沒有返回任何圖片。休息正在工作。希望這對你有幫助。