Sencha Touch同样可以使用地图、多媒体等插件。

   1、Map组件

   我们通过Ext.Map定义Map组件，其xtype为map。除了使用该插件外，还要调用Google的地图API所使用的js文件，代码如下：

<script src=”https://maps.google.com/maps/api/js?sensor=true”></script>

   引入该文件后，我们就可以编写js代码来显示地图了： 

1. Ext.require(‘Ext.Map’)  
2. Ext.application({  
3. //省略其他配置项...  
4. launch:function(){  
5. var map = Ext.create(‘Ext.Map’ ,{  
6. useCurrentLocation:true  
7. });  
8. Ext.Viewport.add(map);  
9. }  
10. });

其中useCurrentLocation方法表示显示用户所在位置。  

在HTML5中，我们可以用内置的方法获取一些地理位置信息，诸如经度、纬度、海拔等。在Sencha Touch中的Map组件，可以通过Ext.util.Geolocation实现同样的功能。代码如下：  

1. <pre name="code" class="javascript">var geo = Ext.create(‘Ext.util.Geolocation’,{  
2. autoUpdate:false,  
3. listeners:{  
4. locationupdate:function(geo){  
5. Ext.Msg.alert(‘地理坐标更新:’+geo.latitude);  
6. }  
7. }  
8. });

   2、Video组件

   Video组件通过Ext.Video定义，xtype为video，代码如下：

1. launch:function(){  
2. var video = Ext.create(‘Ext.Video’,{  
3. fullScreen:true,  
4. url:[‘text.mp4’, ’text.avi’],  
5. loop:true,  
6. posterUrl:’img/text.jpg’  
7. });  
8. Ext.Viewport.add(video);  
9. }

    video中有很多可以自己进行配置的属性，包括：

    width/height；

    url(播放视频文件的URL地址)；

    posterURL：视频未播放时的替代图片；

    loop：设置循环次数

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！