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

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

1、Map组件

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

引入该文件后，我们就可以编写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实现同样的功能。代码如下：

<pre name="code" class="javascript">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：设置循环次数

HTML5开发移动web应用——Sencha Touch篇(12)相关推荐

HTML5开发移动web应用——Sencha Touch篇(5)
这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用.为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有Ja ...
html5 sencha,HTML5开发实战——Sencha Touch篇(1)
学习了许多基本的sencha touch内容,已经了解了sencha touch的开发模式.接下来一段时间我们将利用sencha touch来进行自己的web应用构建.先要解决的是前端的问题,从最简单 ...
HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件即可. 最基础的jQuery Mobile文件的结构代码如下: <body> ...
HTML5开发和web前端开发的区别与联系？
HTML5与Web前端什么关系,Web前端有哪些优势?Web前端就业怎么样?现在学习前端就业前景好吗?越来越多人了解Web前端,也有很多年轻人想进入到Web前端的行列,但是现在Web前端还值得大家去选 ...
HTML5开发APP页面（动效篇）
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
Sencha touch 开发指南
Sencha touch 开发指南本文主要介绍如何使用Sencha Touch为手持设备进行应用开发,主要是针对iPhone这样的高端手机,我们会通过一个详细的例子来介绍整个开发的流程. Sench ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...
如何用Sencha Touch打包Android的APK
什么是Sencha Touch 前不久基于JavaScript编写的Ajax框架ExtJS,将现有的ExtJS整合JQTouch.Raphaël库,推出适用于最前沿Touch Web的Sencha T ...
Sencha Touch
Sencha Touch 是第一款基于 HTML5 的手机开发框架,提供五花八门的界面UI组件用以开发丰富特效的手机应用程序. 而 Sencha 这是刚刚由 ExtJS.jQtouch 和 Rapha ...

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

HTML5开发移动web应用——Sencha Touch篇(12)相关推荐

最新文章

热门文章