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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fareise/article/details/50494107

第一个要接触的就是面板这个组件,它是构建一个页面最基础的组件,其他的内容都要显示在这个面板中。

在上一篇中,我们就已经拿面板为例,介绍了创建组件的方法。这里再把创建面板的代码重复一下:

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中组件的创建方式。在这里,可以定义包括srcwidthheight等图片的基本属性。然后我们利用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(),这个方法传递四个参数,它们分别是:要监听的事件;指定事件处理函数;作用域;对事件处理函数添加一些配置选项。

 

 

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页