第一个要接触的就是面板这个组件,它是构建一个页面最基础的组件,其他的内容都要显示在这个面板中。
在上一篇中,我们就已经拿面板为例,介绍了创建组件的方法。这里再把创建面板的代码重复一下:
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(),这个方法传递四个参数,它们分别是:要监听的事件;指定事件处理函数;作用域;对事件处理函数添加一些配置选项。