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我能够显示{title}的月份名称，但不是来自{image}。我得到的是一个？在应用上标记。

如果我知道的话，我读到了吗？标记然后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 =“image”＆gt;但图像不显示。帮助撕掉我的头发

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
         }

Sencha - 如何在xtype面板html中显示图像，其中图像源是从模型加载的

1 个答案: