Sencha - отображать изображения в HTML-панели xtype, где источник изображения загружается из модели

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.iPNG', которое у меня есть в магазине, и источник меняется с month.iЯ могу отображать название месяца из {title}, но не из {image}. Все, что я получаю - это отметка? в приложении.

Я прочитал это, если получу?пометьте, тогда путь src неверен, но если я дам

'html : '<img style="height: 700px; width: 500px;" src="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]
    });'

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
         }

другой вариант - вы можете определить изображение в html-файле с помощью

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


</style>

и указать этот новый значок в файле js, где вы хотите его использовать

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