Sencha - 如何在xtype面板中顯示圖像HTML，其中圖像源是從模型加載的

Question

下面是來自商店的代碼，其中我有用於測試的硬編碼數據。

`Ext.regStore('CalendarStore', { 
model: 'CalendarModel', 
sorters: [{ 
    property: 'id', 
    direction: 'ASC' 
}], 
proxy: { 
    type: 'localstorage', 
    id: 'calendar-app-store' 
}, 

data: [ 
      { id: 1, title: 'January', image: 'jan.iPNG'} 
     , { id: 2, title: 'Febuary'} 
     , { id: 3, title: 'March'} 
     , { id: 4, title: 'April'} 
     , { id: 5, title: 'May'} 
     , { id: 6, title: 'June'} 
     , { id: 7, title: 'July'} 
     , { id: 8, title: 'August'} 
     , { id: 9, title: 'September'} 
     , { id: 10, title: 'October'} 
     , { id: 11, title: 'November'} 
     , { id: 12, title: 'December'} 
     ] 

});` 

，我試圖加載圖像即「jan.PNG」這是我在商店和源變化與month.i我能夠從{}標題顯示月份名稱，但不能從{}形象。所有我得到的是應用程序上的一個？標記。

我讀過，如果我得到？標記然後將src路徑不正確，但如果我給

'html : '<img style="height: 700px; width: 500px;" src="jan.iPNG "/>' ' 

或

src="http://www.mypics/jan.iPNG "/>' ' 

這些顯示細。下面

是視圖

'CalendarApp.views.viewCalendar = new Ext.form.FormPanel({ 
     id: 'viewCalendar', 
     scroll: 'true', 
     items:[{ 
        xtype: 'textfield', 
        name: 'title' 
        // label: 'title' 

       }, 
       { 
        xtype: 'panel', 
        name :'image', 
        html : '<img style="height: 700px; width:500px;" src="'+'image'+'">' 
      }], 
     dockedItems:[CalendarApp.views.calTopToolbar] 
    });' 

還試圖變異SRC = 「圖像」>但是圖像顯示犯規。幫助撕掉我的頭髮

Answer 1

首先將圖像保存在存在文件的自定義文件夾中。 並使用下面的代碼，

  { 
     xtype: 'panel', 
      icon: 'jan.png', // specify the path of the image 
      width:100,  // if u want to specify the width for image 
      height:80,  // if u want to specify the height for image 
      iconMask: false, 
      handler: jan // if u want to handle the click event 
     } 

另一種選擇是U可以通過

<style> 
     .NewIcon { 
      -webkit-mask-box-image: url('../img/new_icon.png'); 
     } 


</style> 

定義在HTML文件中的圖像，並要使用它

指定的js文件這個新圖標

 { 
     xtype: 'panel', 
      iconCls: 'NewIcon ', 
      width:100,   
      height:80,  
      iconMask: false, 
      handler: newicon 
     }