移动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()，这个方法传递四个参数，它们分别是：要监听的事件；指定事件处理函数；作用域；对事件处理函数添加一些配置选项。