Question

Below is code from Store where i have hardcoded data for testing.

`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'}
      ]

});`

and i am trying to load image i.e ‘jan.PNG’ which i have in store and source changes with month.i am able to display month name from {title} but not from {image}.All i get is a ?mark on the app.

I read that if i get ? mark then the src path is incorrect but if i give

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

or

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

these display fine.

below is the view

'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]
    });'

Also tried variation src=”image”> but the image doesnt display. Help tearing my hair off

Answer 1

First save the image in custom folder where your files are present.
and use below code,

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

another option is u can define the image in html file by

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


</style>

and specify this New icon in the js file where you want to use it

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