jQuery MiniUI,Ajax Web开发

移动web应用开发-Sencha Touch篇(12)

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代码来显示地图了:

Ext.require(‘Ext.Map’)
Ext.application({
//省略其他配置项...
launch:function(){
var map = Ext.create(‘Ext.Map’ ,{
useCurrentLocation:true
});
Ext.Viewport.add(map);
}
});

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

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

var geo = Ext.create(‘Ext.util.Geolocation’,{  
autoUpdate:false,  
listeners:{  
locationupdate:function(geo){  
Ext.Msg.alert(‘地理坐标更新:’+geo.latitude);  
}  
}  
});  

2、Video组件

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

launch:function(){  
var video = Ext.create(‘Ext.Video’,{  
fullScreen:true,  
url:[‘text.mp4’, ’text.avi’],  
loop:true,  
posterUrl:’img/text.jpg’  
});  
Ext.Viewport.add(video);  
}  

video中有很多可以自己进行配置的属性,包括:
width/height;
url(播放视频文件的URL地址);
posterURL:视频未播放时的替代图片;
loop:设置循环次数

作者: fareise
原文: http://blog.csdn.net/fareise/article/details/50649609