Share
Wat je gaat creërenDeze tutorial begeleidt u bij de ontwikkeling van een op locatie gebaseerde mobiele website met behulp van de Google Place-zoekmachine en Sencha Touch 2.1. Dit is een tweedelige zelfstudie en in dit eerste deel leren we hoe we een project kunnen maken met Sencha cmd, een cool thema kunnen maken met SASS / Compass en services kunnen vinden die dicht bij de locatie van de gebruiker liggen.
Google biedt een set API's voor het zoeken naar verschillende services op typen en gebruikerslocatie. Op dit moment ondersteunt Google in totaal 96 servicetypen. Er zijn nog 30 diensten die alleen via zoeken kunnen worden opgehaald. Google heeft een volledige lijst met hen.
Voor toegang tot de Places API is het primaire doel om de applicatie te registreren via de API-console van Google. Nadat we zijn geverifieerd, ontvangen we een API-sleutel die vereist is voor elke API-aanvraag. Google heeft een stapsgewijze handleiding.
De Google Places API gebruikt een API-sleutel om uw toepassing te identificeren. API-sleutels worden beheerd via de Google API's-console. U heeft uw eigen API Key nodig voordat u de API kunt gaan gebruiken. De Places API activeren en uw sleutel maken:
Ik neem aan dat je een lokale server hebt en dat Sencha is ingesteld. Als dit niet het geval is, raadpleegt u hier de detaildocumentatie met alle stappen. We genereren de locator-app met deze opdracht in onze lokale server.
sencha -sdk / path / to / sdk genereer app Locator c: / xampp / htdocs / locator
Zodra we klaar zijn, openen we de app in de browser met de URL http: // localhost / locator en bekijk een eenvoudige toepassing met tabbladen.
Nu moeten we de app structureren met de MVC-componenten.
Controllers
Keer bekeken
winkel
modellen
Een Sencha-applicatie kan meerdere controllerbestanden hebben. Voor een kleine toepassing als deze is één controller echter in orde. We houden alle bindingen en gerelateerde functionaliteit van het evenement binnen deze controller.
De weergaven vertegenwoordigen de pagina's van de toepassing.
Omdat we twee lijsten hebben, onderhouden we twee modellen: Categorie en Plaats. Evenzo twee opslag Categorieën en plaatsen zijn nodig voor het ophalen en opslaan van gerelateerde gegevens. We moeten al deze componentdetails toevoegen app.js zodat de Sencha-motor ze bij het opstarten kan laden.
Accentsconagua
Ext.Loader.setPath ('Ext': 'touch / src', 'Locator': 'app'); Ext.application (name: 'Locator', vereist: ['Ext.MessageBox', 'Locator.util.Util'], views: ['Main', 'Categories', 'PlaceList'], controllers: ['App '], modellen: [' Category ',' Place '], winkels: [' Categories ',' Places '], icon: ' 57 ':' resources / icons / Icon.png ',' 72 ':' resources /icons/Icon~ipad.png ',' 114 ':' resources/icons/[email protected] ',' 144 ':' resources/icons/[email protected] ', isIconPrecomeded: true, startupImage : '320x460': 'resources / startup / 320x460.jpg', '640x920': 'resources / startup / 640x920.png', '768x1004': 'resources / startup / 768x1004.png', '748x1024': 'hulpbronnen /startup/748x1024.png ',' 1536x2008 ':' resources / startup / 1536x2008.png ',' 1496x2048 ':' resources / startup / 1496x2048.png ', start: function () // Vernietig het element #appLoadingIndicator Ext.fly ('appLoadingIndicator'). Destroy (); // Initialiseer de hoofdweergave Ext.Viewport.add (Ext.create ('Locator.view.Main'));, onUpdated: function () Ext.Msg .confirm ("Application Update", "Deze applicatie is zojuist succesvol geweest bijgewerkt naar de nieuwste versie. Nu opnieuw laden? ", Functie (buttonId) if (buttonId === 'yes') window.location.reload (););); Voor elke toepassing hebben we een reeks gemeenschappelijke functies en eigenschappen nodig die in de hele applicatie worden gebruikt. We creëren een Util singleton class voor hetzelfde en plaatsen het bestand onder de app / util / directory. U hoeft de functies van dit bestand op dit moment niet te begrijpen. We zullen deze functies blijven bespreken terwijl we verder gaan.
Ext.define ('Locator.util.Util', singleton: true, // Of de toepassingsweergaven tijdens het wijzigen een animatie hebben = r niet enablePageAnimations: true, // Huidige locatie van gebruiker wordt hier opgeslagen userLocation: null, / / Google plaatst api key API_KEY: 'AIzaSyBmbmtQnXfq22RJhJfitKao60wDgqrC5gA', // Alle api urls api: (function () // var baseUrl = 'https://maps.googleapis.com/maps/api/place/'; var baseUrl = 'php / action.php'; return baseUrl: baseUrl, categorieën: 'resources / data / categories.json', nearestPlaces: baseUrl + ", nearBySearch: 'nearbysearch', foto: 'photo', details: 'details' ) (), // Vernietig een Sencha-weergave destroyCmp: function (child, parent) parent = parent || Ext.Viewport; if (child) Ext.defer (function () parent.remove (child); , Locator.util.Util.animDuration);, // Algemene waarschuwing weergeven showMsg: function (msg, title, cb, scope) if (msg) Ext.Msg.alert (title || 'Error' , msg.toString (), cb || function () , scope || window); retourneer dit;, // Animat e het actieve item showActiveItem: function (parentPanel, childPanel, animation) animation = Ext.apply (type: 'slide', duration: LocatrConfig.amimationDuration, animatie || ); if (parentPanel && childPanel) if (this.enablePageAnimations && animation && animation.type) parentPanel.animateActiveItem (childPanel, animation); else parentPanel.setActiveItem (childPanel); stuur dit terug; , // Show a loading box on a showLoading: function (panel, doShow, message) panel = paneel || Ext.Viewport; if (paneel) if (doShow) panel.setMasked (xtype: 'loadmask', bericht: bericht || 'Bezig met laden ...'); else panel.setMasked (false); stuur dit terug; , // Hoofdletter van het eerste teken van elk woord van een tekenreeks toTitleCase: functie (str) if (! Str) return "; retourneer str.replace (/ \ w \ S * / g, functie (txt) ga terug txt.charAt (0) .toUpperCase () + txt.substr (1) .toLowerCase (););); We hebben de Hoofd bekijken, dat is de verpakking van alle weergaven. We gebruiken Navigatie Bekijk voor hetzelfde, wat best handig is voor eenvoudige kaartlay-out en back-knopbeheer. Bij de start heeft het alleen de categorieënlijst als zijn kind.
/ ** * Hoofdaanzicht - houder van alle weergaven. * Kaart layout standaard om meerdere views te ondersteunen als items * / Ext.define ('Locator.view.Main', extend: 'Ext.NavigationView', xtype: 'main', config: cls: 'default- bg ', items: [xtype:' categories ']); Nu is de installatie van de applicatie voltooid. We hebben de Google Places API-sleutel en we zijn klaar om een lijst met alle typen te maken en deze op de startpagina weer te geven. Er is echter een probleem. Google biedt geen API om al deze typen op te halen. We moeten handmatig een gegevensbestand maken met alle typen. Ik heb een gemaakt json bestand met de naam categories.json een lijst met alle beschikbare typen, en plaats deze in de resources / data directory.
Categorieën: [soort: "accounting", Type: "airport", Type: "amusement_park", Type: "aquarium", Type: "art_gallery", Type: "atm" , Type: "bakery", Type: "bank", Type: "bar", Type: "beauty_salon", Type: "bicycle_store", Type: "BOOK_STORE", Type: "bowling_alley", Type: "bus_station", Type: "koffie", Type: "camping", Type: "car_dealer", Type: "car_rental", Type : "car_repair", Type: "car_wash", Type: "casino", Type: "begraafplaats", Type: "kerk", Type: "city_hall", Type:" clothing_store ", Type:" convenience_store ", Type:" rechtbank ", Type:" dentist ", Type:" department_store ", Type:" doctor ", Type:" elektricien" , Type: "electronics_store", Type: "ambassade", Type: "inrichting", Type: "finance", Type: "fire_station", Type: "bloemist", Type: "food", Type: "funeral_home", Type: "furniture_store", Type: "gas_station", Type: "general_contractor", Type: "grocery_or_supermarket", Type : "gym", Type: "hair_care", Type: "hardware_store", Type: "gezondheid", Type: "hindu_temple", Type: "home_goods_store", soort : "Ziekenhuis", Type: "insurance_agency", Type: "jewelry_store", Type: "laundry", Type: "advocaat", Type: "library", Type:" liquor_store ", Type:" local_government_office ", Type:" slotenmaker ", Type:" onderdak ", Type:" meal_delivery ", Type:" meal_takeaway ", Type:" moskee" , Type: "movie_rental", Type: "movie_theater", Type: "moving_company", Type: "museum", Type: "night_club", Type: "schilder", Type: "park", Type: "parkeren", Type: "pet_store", Type: "apotheek", Type: "fysiotherapeut", Type: "place_of_worship", soort : "loodgieter", Type: "politie", Type: "post_office", Type: "real_estate_agency", Type: "restaurant", Type: "roofing_contractor", Type:" rv_park ", Type:" school ", Type:" shoe_store ", Type:" shopping_mall ", Type:" spa ", Type:" stadion ", Type:" opslag" , Type: "opslag", Type: "subway_station", Type: "synagoge", Type: "taxi_stand", Type: "train_station", Type: "travel_agency", Type: "universiteit", Type: "veterinary_care", Type: "dierentuin"]
Ext.define ('Locator.model.Category', extend: 'Ext.data.Model', config: fields: ["type", name: "name", type: "string", convert: function ( v, record) // Converteert naar titel case en retourneert return Locator.util.Util.toTitleCase (record.get ('type'). split ('_'). join ("));," size " ]); De eigenschap "name" van dit model gebruikt dezelfde "type" -waarde van de categorie. Aangezien de meeste typen een "underscore" hebben, maakt deze convert-functie een waarde weg die de "_" weglaat en de tekenreeks in titelcase converteert. Dus, "travel_agency" wordt "Reisbureau"en we slaan het op onder de eigenschap name van dit model.
Ext.define ('Locator.store.Categories', extend: 'Ext.data.Store', config: model: 'Locator.model.Category', autoLoad: true, sorters: 'name', tandbaars: groupFn : functie (record) return record.get ('naam') [0];, proxy: type: 'ajax', url: Locator.util.Util.api.categories, reader: type: 'json ', rootProperty:' categories '); We laden de winkel automatisch in, omdat dit het eerste verzoek in de app zou moeten zijn. We gebruiken een tandbaarsfunctie voor een gegroepeerde lijst en sorteren op het eerste teken van elke servicenaam.
Categorieweergave is een gewone lijst. We gebruiken indexBar en gegroepeerde functionaliteit voor eenvoudige toegang tot alle typen.
Ext.define ('Locator.view.Categories', extend: 'Ext.List', xtype: 'categories', config: cls: 'default-bg category-list', itemTpl: 'name', store : 'Categorieën', gegroepeerd: true, indexBar: true, title: Lang.home); De lijst ziet er als volgt uit:
We kunnen bepaalde sets bestaande variabelen toevoegen om het bestaande Sencha-thema te veranderen en een nieuw uiterlijk te krijgen. Het volgende is het SASS-bestand. Als u de SASS-instellingen nog niet hebt voltooid, volgt u deze blogpost voor een stapsgewijze handleiding.
// Basiskleurendefinities $ basiskleur: # 333; $ base-gradient: 'mat'; $ actieve kleur: # 36B8FF; // Toolbar-stijlen $ toolbar-base-color: # 444; // Lijststijlen $ list-header-bg-color: # ABE2FF; @import 'sencha-touch / default / all'; // U kunt een van de volgende modules verwijderen die u // niet gebruikt om een kleiner CSS-bestand te maken. @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-picker; @ include sencha-tabs; @ include sencha-toolbar; @ include sencha-toolbar-forms; @include sencha-indexbar; @include sencha-list; @include sencha-layout; @include sencha-carousel; @incasso-sencha-vorm; @include sencha-msgbox; @include sencha-loading-spinner; @include sencha-list-pullrefresh;
We wijzigen de bovenste werkbalkkleur en de koptekst van de lijst en voegen de lijstinvoegtoepassingmix toe.
Zodra we op een van de categorie-items hebben geklikt, willen we alle bedrijven in de buurt van de huidige locatie van de gebruiker in die categorie bekijken. We moeten deze reeks taken volgen:
We kunnen de geolocatiefunctie van de navigator direct gebruiken of Sencha's gebruiken Ext.device.Geolocation. We bewaren de lengte- en breedtegraad in de util bijvoorbeeld voor toekomstig gebruik.
Ext.device.Geolocation.getCurrentPosition (succes: functie (positie) me.util.userLocation = position.coords.latitude + ',' + position.coords.longitude;, failure: function () me.util. showMsg (Lang.locationRetrievalError););
De Google Places API ondersteunt nog geen JSONP-aanvragen, dus we kunnen de gegevens niet direct van de kant van de klant ophalen. We moeten een serverproxy gebruiken om de gegevens op te halen. Dit probleem kan worden opgelost met behulp van PHP en cURL.
De config bestand bevat een aantal constanten. We stellen de API-URL van de base, het type gegevensuitvoer en de details van de afbeeldingsgrootte in.
define ("BASE_API_URL", "https://maps.googleapis.com/maps/api/place/"); define ("DATA_OUTPUT_TYPE", "json"); define ("IMAGE_MAX_HEIGHT", 500); define ("IMAGE_MAX_WIDTH", 500); Dit is een PhP-klasse die de functionaliteit bevat voor het instellen van de URL, het verzenden van cURL-aanvragen en het ophalen van gegevens.
class Locatr / ** * Stelt de URL in op basis van doorgegeven parameters * @return String Een volledige URL met alle querytekenreeksen * / persoonlijke statische functie getFinalUrl () return html_entity_decode (BASE_API_URL. $ _ REQUEST ["action"]. " /".DATA_OUTPUT_TYPE. "?". $ _ SERVER ['QUERY_STRING']); / ** * Een generieke functie om alle cURL-aanvragen te verzenden * @return String Response voor die cURL-aanvraag * / persoonlijke statische functie sendCurlRequest () // cURL-resource ophalen $ curl = curl_init (); // Stel enkele opties in - we geven hier ook een useragent door curl_setopt_array ($ curl, array (CURLOPT_RETURNTRANSFER => 1, CURLOPT_URL => self :: getFinalUrl (), CURLOPT_SSL_VERIFYPEER => false, CURLOPT_USERAGENT => 'Codular Sample cURL Request' )); // Verzend het verzoek en sla de reactie op $ resp $ response = curl_exec ($ curl); // Sluit een verzoek om enkele bronnen op te ruimen curl_close ($ curl); return $ antwoord; / ** * Haalt alle plaatsen in de buurt en een afbeelding van elk indien beschikbaar op * @return String Retourneert alle plaatsen in json * / public static function getNearBySearchLocations () try $ data = json_decode (self :: sendCurlRequest ()) ; $ item = ""; voor ($ i = 0; $ i < count($data -> resultaten); $ i ++) $ item = $ data -> resultaten [$ i]; if (isset ($ item -> photos)) $ imageUrl = BASE_API_URL. "photo? photoreference =". $ item -> photos [0] -> photo_referentie. "& Sensor = false & maxheight = 300 & maxbreedte = 300 & key =" $ _ GET [ "key"].; $ data -> resultaten [$ i] -> foto's [0] -> url = $ imageUrl; return json_encode ($ data); catch (Uitzondering $ e) print "Fout bij getNearBySearchLocations:". $ e -> getMessage ();
Dit is de functionaliteit van elke methode in deze klasse:
file_get_contents () methode ook om de gegevens hier te krijgen.Deze URL is opgebouwd met de eerste afbeeldingsreferentie en doorgegeven met de antwoordgegevens voor elke plaats. Dit helpt ons om ten minste één afbeelding beschikbaar te maken voor elk bedrijf.
Dit bestand wordt alleen gebruikt om het te bellen getNearBySearchLocations functie van de klasse Locator. We sturen de ajax-verzoeken van onze klantzijde rechtstreeks naar dit bestand.
include_once 'config.php'; include_once 'Locatr.php'; $ action = $ _REQUEST ["action"]; if (! isset ($ action)) gooi nieuwe uitzondering ("'actie' parameter is niet meegeleverd"); switch ($ action) case "nearbysearch": print Locatr :: getNearBySearchLocations (); breken; Voor de plaatslijst hebben we een winkel en een model nodig dat lijkt op de categorieënlijst.
Ext.define ('Locator.model.Place', extend: 'Ext.data.Model', config: fields: ["formatted_address", "geometry", "icon", "id", "name", " beoordeling "," referentie "," types "," omgeving "," foto's "]); Ext.define ('Locator.store.Places', extend: 'Ext.data.Store', config: model: 'Locator.model.Place', proxy: type: 'ajax', url: Locator.util .Util.api.nearestPlaces, reader: type: 'json', rootProperty: 'results'); Tot nu toe hadden we geen controller nodig voor enige functionaliteit omdat de categorielijst automatisch werd ingevuld door de winkel. Nu hebben we de controller nodig om de gebeurtenissen af te handelen. We zullen alle vereiste componenten weergeven onder de eigenschap controller refs.
refs: categoriesList: 'categories', main: 'main', placeList: 'placelist'
De lijstklikgebeurtenis in besturingselementen:
controle: categoriesList: itemtap: 'loadPlaces'
Wanneer u op een categorie klikt, willen we de lijst met beschikbare plaatsen onder die categorie weergeven. Zoals we eerder hebben besproken, halen we eerst de huidige locatie van de gebruiker op en vervolgens sturen we met de lengte- en breedtegraad een ajax-aanvraag naar het action.php-bestand. De controller met de "loadPlaces"functie ziet er als volgt uit:
Ext.define ('Locator.controller.App', extend: 'Ext.app.Controller' vereist: ['Ext.device.Geolocation', 'Ext.Map'], util: Locator.util.Util, config : refs: categoriesList: 'categories', main: 'main', placeList: 'placelist', control: categoriesList: itemtap: 'loadPlaces', / ** * Alle plaatsen voor een deel ophalen categorie * / loadPlaces: functie (lijst, index, doel, record) var me = this, loadPlaces = function () // Toon de plaatslijstpagina me.showPlaceList (record); // laad de winkel met de locatie van de gebruiker, radius, type en api-sleutel store.getProxy (). setExtraParams (location: me.util.userLocation, action: me.util.api.nearBySearch, radius: me.util.defaultSearchRadius, sensor: false, key: me.util .API_KEY, typen: record.get ('type')); store.load (functie (records) me.util.showLoading (me.getPlaceList (), false););, store = Ext.getStore ('Plaatsen'); // Als de locatie van de gebruiker al niet is ingesteld, haalt u deze op. // Anders laadt u de plaatsen voor de locatie van de bewaarde gebruiker als (! Me.uti l.userLocation) Ext.device.Geolocation.getCurrentPosition (success: function (position) me.util.userLocation = position.coords.latitude + ',' + position.coords.longitude; loadPlaces (); , failure: function () me.util.showMsg (Lang.locationRetrievalError); ); else // Maak de winkel schoon als er een eerdere gegevensopslag is.removeAll (); loadPlaces (); , / ** * Plaatslijst tonen * / showPlaceList: functie (record) this.getMain (). Push (xtype: 'placelist', title: record.get ('name')); ); De plaatslijst weergave is ook een gewone lijst. We gebruiken XTemplate hier om enkele filterfuncties te gebruiken. De getImage functie krijgt de afbeelding van het bedrijf. Als de afbeelding niet beschikbaar is, wordt het pictogram voor dat bedrijf geretourneerd.
Ext.define ('Locator.view.PlaceList', extend: 'Ext.List', xtype: 'placelist', config: cls: 'default-bg placelist', store: 'Places', emptyText: Lang.placeList .emptyText, itemTpl: Ext.create ('Ext.XTemplate', '[this.getImage (values)]', '','naam','Omgeving',' rating: this.getRating ','', // Geeft de bedrijfsafbeelding als deze beschikbaar is. Anders toont het pictogram beschikbaar voor dat bedrijf getImage: function (data) if (data.photos && data.photos.length> 0) return '
'; terug ''; , // Toont een op ster gebaseerde beoordeling. De functionele details worden gegeven in de Util-class getRating: function (rating) return Locator.util.Util.getRating (rating); )); We krijgen een score van nul tot vijf voor bedrijven. In plaats van het ratingnummer te tonen, kunnen we een eenvoudige functie schrijven om de beoordelingen als sterren te tonen. We voegen het toe getRating functie naar de util bestand, dat kan worden gebruikt binnen deze PlaceList-sjabloonfuncties:
Er zijn drie afbeeldingen: geen ster, half ster en een ster. De CSS wordt hieronder gegeven:
getRating: function (rating, max, hideRatingValue) if (rating! == undefined) var str = ''; rating = parseFloat (beoordeling); max = max || 5; // We verdelen de classificatie in een deel tot maximale waarde voor (var i = 1; i < = max; i++) // For each 1 rating, add a full star if (i < = rating) str += ''; if (i> rating) // Als de onderdeelwaardering een decimaal is tussen 0 en 1, voeg dan een halve ster toe als (rating% 1! == 0 &&; (i - rating) < 1) str += ''; // Voeg voor alle deelwaardering 0 een ster anders toe str + = ''; if (! hideRatingValue) str + = ''; terugkeer str; retourneer Lang.noRating;'+ rating +''; str + = '
.beoordelingen overflow: auto; .ratings div.star float: left; hoogte: 14 px; breedte: 14 px; achtergrondgrootte: 12px! belangrijk; achtergrond-positie: 50%; .ratings .full-star background: url (... /images/full_star.png) geen herhaling; .ratings .half-star background: url (... /images/half_star.png) geen herhaling; .ratings .no-star background: url (... /images/no_star.png) geen herhaling; .ratings. value float: left; lettergrootte: 13px; lettertype: vet; marge links: 5px;
Dit is de finale plaatslijst uitzicht.
/ ************************** Plaatslijst ***************** ************* / .placelist.x - lijst - lege tekst font - size: 14px; kleur: #fff; opvulling: 20px; .x - list.placelist.x - lijst - item.x - dock - horizontaal border: 0! important; .x - list.placelist.x - list - item.item / * background: rgba (255, 255, 255, 0.8); lettergrootte: 14 px; opvulling: 8px; * / / * achtergrond: rgba (255, 255, 255, 0.8); * / achtergrond: -webkit - verloop (rechtsboven, linksboven, linksonder, kleur - stop (0%, #ffffff), kleur - stop (47%, # f6f6f6), kleur - stop (100%, #ededed)); / * Chrome, Safari4 + * / achtergrond: -webkit - lineair - verloop (boven, #ffffff 0%, # f6f6f6 47%, #ededed 100%); / * Chrome10 +, Safari5.1 + * / font - grootte: 14px; grens - straal: 5px; opvulling: 8px; - webkit - vak - schaduw: 0 0 10px 2px rgba (0, 0, 0, 0.6); opvulling - rechts: 82 px; .x - list.placelist.x - lijst - item.item.name font - weight: bold; marge: 3px 0 8px 0; .x - list.placelist.x - lijst - item.item.vicinity font - size: 12px; kleur: # 222; margin-bottom: 10px; .x-list.placelist .x-list-item .item .rating .x-list.placelist .x-list-item .photo, .x-list.placelist .x-list-item .icon-wrapper positie: absoluut; weergave: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; rechts: 25px; top: 6px; .x-list.placelist .x-list-item .photo img max-width: 75px; maximale hoogte: 63 px; rand: 2px effen wit; -webkit-box-shadow: 0 0 5px 0px rgba (0, 0, 0, 0.5); achtergrond: zwart; .x-list.placelist .x-list-item .icon-wrapper background: # 960000; rand: 2px effen wit; - webkit - vak - schaduw: 0 0 5px 0px rgba (0, 0, 0, 0.5); .x - list.placelist.x - lijst - item.icon width: 50px; hoogte: 50px; achtergrond: wit; - webkit - masker - afbeelding: url (http: //maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png); - webkit - masker - grootte: 35px; - webkit - masker - herhalen: nee - herhalen; - webkit - masker - positie: 50%; / ************************** Plaatslijst EINDE *************** *************** /En omdat we een donkere achtergrond gebruiken, moeten we het pull-to-refresh-css een beetje veranderen. Dus voeg volgende css toe in locator.css bestand:We kunnen een pull-to-refresh-plug-in toevoegen aan deze plaatslijst. Voeg gewoon de onderstaande code toe in de plaatslijst array config.
plug-ins: [xclass: 'Ext.plugin.PullRefresh', pullRefreshText: Lang.placeList.pullToRefresh]
/ * Trek om plug-in te vernieuwen * / .x-list-pullrefresh color: #fff; .X-list-pullrefresh-pijl -webkit - masker: centrum url (data: image / png, base64, iVBORw0KGgoAAAANSUhEUgAAACgAAAA8CAYAAAAUufjgAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAjFJREFUeNrsmU8oREEYwOexdtNuKBfFwdVhCyfuysnFiXISS + 1BLopyUpKLXETkRLaUi1LK3Q2lpPbiQLnIn03a / Hm + z86Ttv0zM ++ bfbOar36Hbad5v535Zp7v47iuy0wOpyoEHccRHV9L9NxPkUE / bhKCOKiOSPAdn69DsJ5I8E2HYA0QJRJ8Bb50CDYRCT7pEMQD0kwk + CByUFQEW4gE73UIhoA2IsFb4ENEMCQ5MdU1IxwygpT3oKNLMGyyYFVscdhusc8tDpu + xRG7xf95BW0O2kNiV1AgIvaQ2BzUJNgJNJYZGyUU7OG1cal4Bi68oqkDPszy2teEwJp5Cdyu / lZ1g8CwIYJ7wEF + 2YmrNw90Byx3BizgKhaqizEP1wg7CLLxCEzy / CtauMeBlQDyEfNuGrgU6SyM8F9SyVgHdmRaH6tAb4XkToEp2d4M5mOK0TWMigU2koa8vJMRZPxEb2ss2LEVPMpPLlMRxBgDZjQJLgNbxb6Uab9tAn3EcifAeKkBMoLY + j0GWonk7oB + lmsFkwhidAGHBPmIeTcAnJcbKCuIMQEs + hScAzZEBqoIYuzyFVCJI36lMJ2CDfxibZeUu + EX / 4uMIFP8ZyLejxkgK0hG5a8kP4IYSZbr1IuQVHmAX0HGX4VuGfZVJ6cQxPd1uoRcWqDW0SroFVzZAnJZ / h0LWhAjUUAw4XdSSsH8fExRTEgtGAOuOTETBb16Jk412e + bxOSwglYw6PgWYABvLk8P7zGJFwAAAABJRU5ErkJggg == ) nee - herhalen; achtergrond: #fff; Hier gaan we:
Dit is het eerste deel van de tutorial. We hebben een lijst gemaakt met services die zijn geleverd door de Google Places API en vervolgens voor een bepaalde service. We hebben een lijst met alle plaatsen in de buurt weergegeven. In het volgende en laatste deel van deze zelfstudie bespreken we de volgende functionaliteit:
Sencha is momenteel een van de sterkste HTML5-gebaseerde mobiele bibliotheken. Zodra je het hebt ingesteld, kun je geweldige, vloeiende mobiele applicaties schrijven. Deze toepassingen kunnen worden gebruikt als mobiele websites of kunnen worden ingepakt in Phonegap om hybride apps voor iOS en Android te maken.
Het tweede deel van deze tutorial is nu beschikbaar. Hier vindt u het: Maak een Location-Aware Site met Sencha Touch - Locaties weergeven.
