移动web应用开发-Sencha Touch篇(3)

第一个要接触的就是面板这个组件，它是构建一个页面最基础的组件，其他的内容都要显示在这个面板中。
在上一篇中，我们就已经拿面板为例，介绍了创建组件的方法。这里再把创建面板的代码重复一下：

var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'myPanel',
            style: 'color:red',
            html: '一个简单的示例面板'
        });

有问题的话可以参考之前的博客。

接下来，我们要在我们之前创建的面板中添加图片，代码和相关注释如下：

launch:function(){
var img = Ext.create('Ext.Img',{
src:'1.jpg',
width:118,
height:120,
});
var panel = Ext.create('Ext.Panel',{
id:'mypanel',
cls:'bgColorPink',//定义组件所使用的样式
items:[img]//定义放置在面板中的子组件
});
Ext.Viewport.add(panel);
}

首先，图片组件的创建就如我们上次说的，符合Sencha Touch中组件的创建方式。在这里，可以定义包括src、width、height等图片的基本属性。然后我们利用panel中的item属性，将这个图片放到创建的面板中。这样，将图片加入面板的操作就完成了。

但是我们要注意，Sencha Touch采用的是动态加载的技术，也就是说需要什么加载什么。因此，我们如果要使用Ext.Img这个类，需要在代码的最开始加入如下代码：

Ext.require('Ext.Img')

这句话就是开启了动态加载，其作用类似于java中的包引入或者php中的include_once

接下来，我们转移一下视角，看看如何往这个基本的界面中加一些动作。在img的创建内容中添加如下代码：

listeners:{//指示图片组件的监听器
//添加了tap事件监听
tap:function(){
Ext.Msg.alert('open the picture!');
}
}

这里我们为图片组件添加了listener（监听器）属性，用于监听事件的发生。里面我们定义了tap方法，表示当手指触摸屏幕时，发生的动作。

除此之外，我们还可以使用另一种方法进行事件监听，代码如下：

var handleTap = function(){
//do something
}
img.addListener(‘tap’,handleTap,this,{
single:true;
delay:1000
});

这里我们先定义了一个handleTap,它是事件处理函数。

第二部分我们为这个img对象添加了监听器，即img.addListener()，这个方法传递四个参数，它们分别是：要监听的事件；指定事件处理函数；作用域；对事件处理函数添加一些配置选项。

作者： fareise
原文： http://blog.csdn.net/fareise/article/details/50494107