jQuery MiniUI,Ajax Web开发

移动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