HTML5 developing mobile Web Apps--sencha Touch (12)

Sencha Touch can also use plugins such as maps, multimedia, and more.

1. Map Components

We define the map component through ext.map , whose xtype is map. In addition to using the plug-in, but also to call Google 's map API used by the JS file, the code is as follows:

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

After introducing the file, we can write the JS code to display the map:

Ext.require (' Ext.map ') ext.application ({//Omit other configuration items ... launch:function () {var Map = ext.create (' Ext.map ', { Usecurrentlocation:true}); Ext.Viewport.add (map);}});   Where the Usecurrentlocation method represents the location where the user is displayed.   in HTML5, we can use the built-in method to obtain some geo-location information, such as longitude, latitude, elevation and so on. The map component in Sencha Touch enables the same functionality through Ext.util.Geolocation. The code is as follows:

<pre name= "Code" class= "javascript" >var Geo = ext.create (' Ext.util.Geolocation ', {autoupdate:false,listeners:{ Locationupdate:function (GEO) {Ext.Msg.alert (' Geographical coordinates update: ' +geo.latitude);}});

2. Video Components

The video component is defined by ext.video andxtype is videowith the following code:

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);}

VideoThere are many properties that can be configured on their own, including:

Width/height;

URL ( the URL where the video file is played );

Posterurl: Alternate picture When the video is not playing;

Loop: Set the number of cycles

HTML5 developing mobile Web Apps--sencha Touch (12)