向面板中添加图片

index.js

Ext.require('Ext.Img');    
Ext.application({    
name: 'MyApp',    
icon: 'images/icon.png',//用于指定应用程序被添加到使用iOS操作系统的设备中的主屏幕时所使用的PNG格式的图标文件的来源    
glossOnIcon: false,  //用于指定你是否想要取消iOS操作系统中为主屏幕中的图标自动添加的gloss特效（该特效使图标具有金属般闪亮的效果），当该配置选项值为false时该特效被取消  
phoneStartupScreen: 'images/phone_startup.png',  //用于指定应用程序被添加到使用iOS操作系统的移动电话（iPhone或iPod）的主屏幕上之后应用程序启动时所显示的PNG格式的图标文件的来源  
tabletStartupScreen: 'images/tablet_startup.png',  //用于指定应用程序被添加到使用iOS操作系统的平板电脑（iPad）的主屏幕上之后应用程序启动时所显示的PNG格式的图标文件的来源  
  
launch: function() {    
var img=Ext.create('Ext.Img',{    
      src: 'img/icon.png',    
      left:200,  
      top:200,  
      width:400,    
      height:150,    
      listeners:{    
          tap:function(){    
              alert('您点击了图片');    
          }    
      }    
 });    
 var panel = Ext.create('Ext.Panel', {    
     id:'myPanel',    
     cls:'bgColorPink',  //定义组件所使用的样式类  
     items:[img]  //定义放置在面板组件中的子组件  
 });    
 Ext.Viewport.add(panel);    
}    
}); 

使用addListener，组件中使用了4个参数：第一个参数代表需要被监听的事件；第二个参数用于指定事件处理函数；第三个参数代表事件处理函数的作用域，即函数体内的this变量所引用的对象；第四个参数用于对事件处理函数添加使用一些配置选项

Ext.require('Ext.Img');  
Ext.application({  
name: 'MyApp',  
icon: 'images/icon.png',  
glossOnIcon: false,  
phoneStartupScreen: 'images/phone_startup.png',  
tabletStartupScreen: 'images/tablet_startup.png',  
launch: function() {  
var img=Ext.create('Ext.Img',{  
      src: 'img/icon.png',  
	  left:200,
	  top:200,
      width:400,  
      height:150
 });  
 var panel = Ext.create('Ext.Panel', {  
     id:'myPanel',  
     cls:'bgColorPink',  
     items:[img]  
 });  
 Ext.Viewport.add(panel); 
 //添加图片组件的tap事件的事件处理函数  
 var handleTap=function() {  
 alert('您点击了图片'); 
}
 //添加图片组件的tap事件的监听器并指定事件处理函数为handleTap函数  
img.addListener('tap',handleTap,this,{   
single:true,  
delay:1000  
});    
}  
});