第3章面板与布局-3.1放置图片

来源：互联网发布：猎场网络点击量编辑：程序博客网时间：2024/05/16 10:19

在ST2.0中，可以通过布局来将表单、面板以及其它组件以一种合理的组织结构显示在页面上。为了让页面在各个浏览器中的显示效果保持统一，ST2.0提供了一种强大的布局管理机制

本章内容包括：

如何在一个面板组件中放置一个图片组件。

ST2.0组件动态加载技术的分类及其使用方法。

Tab面板组件的配置方法。

常用布局及其配置方法。

Carousel组件的配置方法。

Sencha Touch2.0中新增Navigation View组件的配置方法。

使用xtype配置选项创建对象。

3.1 在面板中放置图片

ST2.0中大量使用面板组件，面板组件是大多数布局的基础。面板组件可以理解为页面中的一个局部显示区域，可以再面板组件中添加文字、HTML代码、图像，甚至其他ST组件。通过Ext.Panel类来创建面板组件。Ext.Panel继承Ext.Containerl类（定义容器组件），因此面板组件同时也是一个容器组件，可以通过容器组件的layout配置选项来定义面板内各个组件的布局方式。默认情况下，在容器组件中放置一些子组件有些类似于在页面或某个元素中放置一些子元素，一个子组件将紧跟在它的前一个子组件之后。

使用SDK生成的工程chapter03，同时copy sencha-touch-debug.js到chapter03中

修改index.html和app.js

代码如下：

清单3-1

<!DOCTYPE HTML><html manifest="" lang="en-US"><head>    <meta charset="UTF-8">    <title>在面板组件中放置图片</title><link rel="stylesheet" href="/resources/css/app.css" type="text/css"><script type="text/javascript" src="sencha-touch-debug.js"></script><script type="text/javascript" src="app.js"></script>    <style type="text/css">      .bgColorPink{background-color:pink;  }    </style></head><body></body></html>

清单3-2

Ext.Loader.setPath({    'Ext': 'sdk/src'});//</debug>Ext.require('Ext.Img');Ext.application({    name: 'MyApp',    icon: 'resources/images/icon.png',glossOnIcon :false,phoneStartupScreen:'resources/images/phone_startup.png',tabletStartupScreen:'resources/images/tablet_startup.png',launch:function(){var img = Ext.create('Ext.Img', {src:'resources/images/html51.jpg',width:118,height:150,listeners:{tap:function(){Ext.Msg.alert('您点击了图片');}}});var panel = Ext.create('Ext.Panel', {id : 'myPanel',cls : 'bgColorPink',items : [img]});Ext.Viewport.add(panel);    }});

效果如下图：

监听器及事件处理函数的使用如下：

Ext.Loader.setPath({    'Ext': 'sdk/src'});//</debug>Ext.require('Ext.Img');Ext.application({    name: 'MyApp',    icon: 'resources/images/icon.png',glossOnIcon :false,phoneStartupScreen:'resources/images/phone_startup.png',tabletStartupScreen:'resources/images/tablet_startup.png',launch:function(){var img = Ext.create('Ext.Img', {src:'resources/images/html51.jpg',width:118,height:150,});var panel = Ext.create('Ext.Panel', {id : 'myPanel',cls : 'bgColorPink',items : [img]});Ext.Viewport.add(panel);//添加图片组件tap事件的事件处理函数var handleTap = function() {Ext.Msg.alert('您点击了图片');};//添加图片组件tap事件的监听器并指定事件处理函数为handleTap函数img.addListener('tap', handleTap, this, {//或img.on('tap',handleTap, this, {single: true,delay: 1000});    }});

点击图片效果如下：

第3章 面板与布局-3.1放置图片

第3章面板与布局-3.1放置图片