Vi vil fortsette der vi slapp i forrige innlegg.

I det første innlegget, app utviklet vi var ganske enkelt ved sin navigasjon og en Sencha navigasjonsvisningen var perfekt for et slikt oppsett. Men mens du finner ut at du må legge til flere tilpassede kontroller til verktøylinjene, ved hjelp av denne typen visning blir vanskelig fordi Sencha opprettnavigasjonslinjen på egen hånd og vise /skjule elementer i det øker kompleksiteten.

Så , så vi fortsetter å legge til mer funksjonalitet i appen, må vi gjøre noen endringer i strukturen. Først vil vi endre hovedpanelet til en kort layout

Main.js Twitter /** * Hovedvisning -. Innehaver av alle visningene. * Kort layout som standard for å støtte flere synspunkter som elementer * /Ext.define ('Locator.view.Main', {forlenge: 'Ext.Container', xtype: 'main', config: {CLS: 'default- bg ', layout:' kort ', eks: [{xtype: "kategorier"}]}});

Tidligere var vi viser alle de stedene som en liste i PlaceList listevisning. Nå ønsker vi å legge til et kart alternativ også som vil vise alle sted stillinger som markører. Så endrer vi den andre siden til en kort layout som holder to paneler - PlaceList og PlaceMap:

Steder (kortoppsett)

PlaceList (Sencha listevisning)
< li> PlaceMap (Sencha Kart Container)

Places.js
Ext.define ('Locator.view.Places', {forlenge: 'Ext.Container', xtype: 'steder', config: {layout: 'kort', eks: [{xtype: 'placelist'}]}});
PlaceList.js

The Places container har PlacesList panel som sine barn. Fordi vi utelatt navigasjonsvisningen, må vi legge enkelte tittellinja til hvert barn panel. Også vi legger et kart ikonet til høyre på verktøylinjen; trykke på denne knappen, viser vi kart panel med alle sted markører
Ext.define ('Locator.view.PlaceList', {forlenge:. 'Ext.List', xtype: 'placelist', krever: [Ext .plugin.PullRefresh '], config: {CLS:' default-bg placelist ', lagre:' Places ', emptyText: Lang.placeList.emptyText, plugins: [{xclass:' Ext.plugin.PullRefresh ', pullRefreshText: Lang .placeList.pullToRefresh}], itemTpl: Ext.create ('Ext.XTemplate', document.getElementById ('tpl_placelist_item') innerhtml, {getImage. funksjon (data) {//Hvis det er et bilde tilgjengelig for stedet, viser den første i listeelement hvis (data.photos & & data.photos.length > 0) {return '< div class = "bilde" > < img src = "" + data.photos [ ,,,0],0] .url + '"/> < /div >';} //Hvis det ikke er bilde tilgjengelig, så vi vil vise ikonet på stedet //som vi får fra stedet dataene selv tilbake ['< div class = "icon-wrapper" > ',' < div class = "icon" style = "- WebKit-maske-image: url ('+ data.icon +');" > < /div > ',' < /div > '] bli med. (' '); } GetRating: function (rangering) {return Locator.util.Util.getRating (vurdering); }}), Eks: [{xtype: 'tittellinja', dokket: 'top', navn: 'place_list_tbar', eks: [{xtype: 'knapp', ui: "tilbake", navn: 'back_to_home', tekst: "Hjem"}, {xtype: 'knapp', justere: "rett", iconCls: 'locate4', iconMask: true, name: 'show_map', ui: "mørk"}]}]}});

Den PlaceList ser slik ut:

Legg merke til kartikonet øverst i høyre hjørne. Tappe dette, skaper vi og aktivere kart panel. La oss lage en PlaceMap syn som vil være en enkel beholder med kart og en verktøylinje som har en knapp for å komme tilbake til PlaceList.

PlaceMap.js
Ext.define ('Locator.view.PlaceMap' {forlenge: 'Ext.Container', xtype: 'placemappanel', config: {layout: 'fit', eks: [{xtype: "kart", navn: 'place_map', mapOptions: {zoom: 15}} {xtype: 'tittellinja', dokket: 'top', navn: 'place_map_tbar', eks: [{xtype: 'knapp', ui: "tilbake", navn: 'back_to_home', tekst: "Hjem"}, {xtype : 'knapp', justere: "rett", iconCls: 'liste', iconMask: true, navn: 'show_place_list', ui: "mørk"}]}]}});

Nå, i kontrolleren vil vi legge til tre funksjoner for å opprette og aktivere disse panelene. Jeg har alltid foretrekker å ha en individuell navigasjonsfunksjon for hver side som skiller navigasjon fra den funksjonelle delen.

Referanser i Controller /App.js

La oss liste ned alle refs
vi trenger inne i kontrolleren
refs:. {//Containere categoriesList: "kategorier", hoved: 'main', placesContainer: 'steder', placeList: 'placelist', placeMapPanel: 'placemappanel', placeMap: ' kart [name = "place_map"] ', //Knapper showMapBtn:' knapp [name = "show_map"] ', showPlaceListBtn:' knapp [name = "show_place_list"] ', backToHomeBtn:' knapp [name = "back_to_home"] ', backToPlaceListBtn:' knapp [name = "back_to_placelist"] '}

Vi vil ha en showhome metode som vi kaller mens PlaceList og PlaceMap panel tilbake knappene trykkes. Det bringer brukeren tilbake til startskjermen

showhome () Twitter /** * Show Hjem Panel ** /showhome. Function () {var meg = dette; if (me.getMain () getActiveItem () == me.getCategoriesList ().!) {me.util.showActiveItem (me.getMain (), me.getCategoriesList ()); }}

Mens en kategori element trykkes, skaper vi Places container, sette tittelen på hvert panel til navnet på den kategorien og aktivere PlaceList panel innenfor. Den siste delen er nødvendig, slik at hver gang du lander til stedet listesiden hjemmefra side

showPlacesContainer () Twitter /** * Vis steder container * /showPlacesContainer. Funksjon (type) {var meg = dette, name = me.util.toTitleCase (type.split ('_') delta ('').); (! me.getPlacesContainer ()). Hvis {this.getMain () legge ({xtype: 'steder'}); } //Sett placelist tittelen til kategori Ext.each (me.getPlacesContainer () spørring ('tittellinja'), funksjon (tittellinja) {titleBar.setTitle (navn),.}, Meg); me.getPlacesContainer () setActiveItem (0).; me.util.showActiveItem (me.getMain (), me.getPlacesContainer ());}

showPlaceList () /showPlacesMap ()

Vi viser /skjul PlaceList Hotell og PlaceMap
containere avhengig av hva du trykker - listen ikonet eller kartikonet Twitter /** * Vis sted listen * /showPlaceList: function () {var meg = dette; me.util.showActiveItem (me.getPlacesContainer (), me.getPlaceList () {Type: 'flip', omvendt: true});}, /** * Vis steder kartlegge * /showPlacesMap: function () {var meg = denne; (! me.getPlaceMapPanel ()). Hvis {me.getPlacesContainer () til ({xtype: 'placemappanel'}); } //Få den aktive kategorien type og sett den til tittelen etter å ha skiftet til titlecase me.getPlaceMapPanel().down('titlebar').setTitle(me.util.toTitleCase(me.activeCategoryType.split('_').join(' '))); me.util.showActiveItem (me.getPlacesContainer (), me.getPlaceMapPanel () {Type: 'flip'});}

this.activeCategoryType - denne variabelen er satt mens brukeren velger en kategori. Vi vil komme til det i et øyeblikk. I kontrolleren kontroll, vi legger til knappen Pek hendelser:
showMapBtn: {springen: 'showPlacesMap'}, showPlaceListBtn: {springen: 'showPlaceList'}

Du skal nå kunne teste programmet i nettleseren og se hvordan oppsettet endringen fungerer. Vi er ferdig med synspunktene knyttet til flere steder. Vi vil se nærmere på plassering av kartmarkører snart, men før at jeg ønsker å dekke hvordan vi kan opprettholde nettleser historie i disse enkelt side nettsteder.

---

2. Oppretthold Browser History

Mens du oppretter en enkelt side nettsted, blir det helt nødvendig for å opprettholde nettleserens historikk. Brukere navigerer frem og tilbake på en nettside, og mange ganger nettverksproblemer eller manglende respons tvinger brukeren til å laste en side på nytt. I disse scenariene, hvis historien ikke er opprettholdt, forfriskende en side vil til slutt føre brukeren tilbake til den første siden som blir veldig irriterende i visse tilfeller.

I denne delen vil vi se på hvordan vi kan bruke Sencha routing funksjonalitet for å finne en løsning på dette problemet. Husk alltid å innlemme historie vedlikehold fra starten av søknaden din. Ellers vil det være en kjedelig jobb å implementere denne funksjonaliteten mens programmet er allerede halvgjort

Vi vil legge til to ruter for de kategorier og steder sidene henholdsvis
ruter:.. {'': 'Showhome ',' kategorier /: type ':' getPlaces '}

Sencha Controller har en metode som heter redirectTo som aksepterer en relativ url og kaller funksjonen matchet til det. Vi vil bruke en tom streng for å gå til den første siden (dvs. listen kategorier) og en bestemt kategori typen til å gå til Place listesiden.

Så, mens vi ønsker å komme tilbake til kategorier liste fra Steder container, i stedet for å ringe showhome ()
funksjon, vi bare omdirigere til den spesifikke ruten, og det vil automatisk ringe ønsket metode
backToHomeBtn.: {springen: function () {this.redirectTo (''); }}

Du kan stille spørsmål: hva er forskjellen på disse to mens begge kan oppnås i en eneste linje med kode? I utgangspunktet er det ingen forskjell, men når du kommer til å opprettholde alle navigasjons via routing, foretrekker jeg å følge en enkelt trend gjennom. I tillegg har du til å opprettholde vinduet hasj selv om du kaller funksjonen direkte.

Vi så loadPlaces () metoden i del 1 av denne opplæringen som sender en Ajax forespørsel å hente stedsdata. Denne gangen har vi tenkt å legge litt der for å lagre gjeldende kategori type i kontrolleren eksempel som vil være nødvendig i fremtiden. Dessuten ønsker vi å deaktivere kartet knappen til alle stedene er lastet. Vi ønsker å vise markør så snart kartet er gjengitt og for det, bør de stedene lastes først

lansering () /getPlaces ()
lansere. Function () {var meg = dette; me.getApplication () på. ({categorychange: {fn: function (newCategory) {me.activeCategoryType = newCategory;}}, placechange: {fn: function (newPlaceReference) {me.activePlaceReference = newPlaceReference;}}});} , /** * Hente alle steder for en particlur kategori * /getPlaces: function (type) {var meg = dette; //Vis sted listesiden me.showPlacesContainer (type); //Deaktiver vis på kart-knappen til listen blir lastet me.getShowMapBtn () deaktivere (.); //Hold en referanse til den aktive kategorien type i denne kontrolleren me.getApplication () fireEvent ('categorychange', type).; Var butikken = Ext.getStore ('Places'), loadPlaces = function () {me.util.showLoading (me.getPlaceList (), true); //Sett parameter for å laste placelist for denne "type" store.getProxy () setExtraParams ({plassering. Me.util.userLocation, action: me.util.api.nearBySearch, radius: me.util.defaultSearchRadius, sensor: false , tast: me.util.API_KEY, typer: type}); //Hent den steder store.load (function () {me.util.showLoading (me.getPlaceList (), false); //Aktiver vis på kart-knappen me.getShowMapBtn () gjør ();.}); } //Hvis brukeren befinner seg allerede ikke satt, hente den. //Else laste stedene for brukeren reddet beliggenhet if (me.util.userLocation!) {Ext.device.Geolocation.getCurrentPosition ({suksess: funksjon (stilling) {me.util.userLocation = position.coords.latitude + ' ', + position.coords.longitude; me.util.userLocation = me.util.defaultLocation; loadPlaces ();}, svikt: function () {me.util.showMsg (Lang.locationRetrievalError);}}); } Else {//Rengjør butikken hvis det er noen tidligere data store.removeAll (); loadPlaces (); }}

I lansering (), legger vi et arrangement " categorychange
" til Application objektet og fyre den gang vi får en ny kategori type. Det setter en Controller variabel activeCategoryType til den typen. Nå er spørsmålet, hvorfor gjør vi sette variabelen via en hendelse enn å tildele den direkte? Det er fordi vi kan være lurt å sette skriv
fra andre synspunkter eller kontrollere. Gjøre det på denne måten øker også mulighetene mange.

Derfor for kategorilisten varen springen arrangementet også, vi kommer ikke til å ringe getPlaces () -funksjonen direkte. Vi vil i stedet bruke redirectTo metoden å laste steder for den aktuelle kategorien type. La oss legge til at i Controller kontroll:
categoriesList: {itemtap: function (liste, indeks, target, rekord) {this.redirectTo ('kategorier /' + record.get ('type')); }}

Så, mens du velger en kategori type, si "art_gallery", din nettleser url endres til "/locator /locator /# kategorier /art_gallery" og en PlaceList panel vil åpne med alle kunstgallerier. Nå, hvis du har lastet inn siden, det vil igjen åpne den samme PlaceList side - ikke den første siden

---

3.. Skjerm steder på kartet

Vi er ferdig med alle visningene for å vise stedene. Vi vil skape og vise PlaceMap beholder hver gang brukeren kraner på Kart-knappen. Vi ønsker ikke å gjengi kart med mindre brukeren ønsker å se det.

I stedet for å fjerne markører én etter én og legge andre, jeg foretrekker å fjerne kartet panel helt når brukeren kommer tilbake til kategori notering siden. Så, la oss legge denne delen for hjem-knappen springen:
backToHomeBtn: {springen: function () {this.redirectTo (''); //Ødelegg mappanel helt slik at vi ikke trenger å //lagre og fjerne eksisterende markører if (this.getPlaceMapPanel ()) {this.getPlacesContainer () fjerne (this.getPlaceMapPanel ()).; }}}, PlaceMap: {//Lag markørene i maprender hendelsen maprender:. 'ShowPlacesMarkers'}

Vi skaper markørene i "maprender" event

showPlaceMarkers () Twitter /** * Lag markører for brukeren befinner seg og alle * steder. På å klikke en markør, viser Infobubble med detaljer * /showPlacesMarkers: function (extMap, Gmap) {var meg = dette, plassering, data, markør, userLocation = me.util.userLocation.split (','), currentPosition = new google .maps.LatLng (userLocation [0], userLocation [1]), image = ny google.maps.MarkerImage (ressurser /images /marker.png ', ny google.maps.Size (32, 32), ny google. maps.Point (0, 0)), //Opprett en InfoBubble eksempel ib = new InfoBubble ({shadowStyle: 1, padding: 0, bakgrunnsfarge: 'rgb (0,0,0)', borderRadius: 4, arrowSize: 15 , borderWidth: 1, borderColor: '# 000', disableAutoPan: true, hideCloseButton: true, arrowPosition: 30, backgroundClassName: 'infobubble', arrowStyle: 2}), /* * Viser InfoBubble ** /setupInfoBubble = funksjon (data, _marker) {google.maps.event.addListener (_marker, 'mousedown ", funksjon (hendelse) {//Lukk eksisterende informasjonsboblen if (ib) {ib.close (); } //Kepp en forekomst av den aktive stedets id i //den infobubble eksempel for å få tilgang til det senere ib.placeReference = data.reference; //Sett teh innholdet i infobubble ib.setContent (['< div class = "infobubble-innhold" >', data.name «< /div > '] .join (' ')); ib.open (Gmap, dette); }); }; /** * Trykk på InfoBubble håndtert her * /google.maps.event.addDomListener (ib.bubble_, "klikk", function () {if (me.activeCategoryType) {me.redirectTo ('kategorier /' + me.activeCategoryType + '/' + ib.placeReference);}}); //For alle stedene opprette egne markører me.getPlaceList (). GetStore (). Hver (funksjon (rekord) {data = record.getData (), plassering = data.geometry.location, marker = new google.maps.Marker ({posisjoner: ny google.maps.LatLng (location.lat, location.lng), kart: Gmap, ikon: image}); setupInfoBubble (data, markør);}, meg); //Opprett en annen markør for brukerens posisjon ny google.maps.Marker ({posisjoner: currentPosition, kart: Gmap, ikon: new google.maps.MarkerImage (ressurser /images /currentlocation.png ', nye google.maps. størrelse (32, 32), ny google.maps.Point (0, 0))}); //Senter kartet på brukeren befinner seg. En forsinkelse er gitt fordi fra //andre gang videre det ikke sentrere kartet på brukerens posisjon Ext.defer (function () {gMap.setCenter (currentPosition);}, 100);}

Flere aspekter av funksjonalitet er håndtert i denne funksjonen:

Opprett markører og vise

Vis brukerens posisjon

Vis info boble mens tappet på en markør

På hanke en informasjonsboblen, gå til stedet Detaljer siden

Opprett Markører og vise dem

Viser markører er ganske enkelt. Bare bruke et markør passerer posisjonen og google kart eksempel. Du kan også bruke et annet bilde i den markør som det vi gjorde her. For hver post i Steder butikken skaper vi en markør og på musen ned (som faktisk fungerer som springen hendelse) vi kaller setupInfoBubble () -metoden passerer data og markøren eksempel.

Vis brukerens nåværende plassering

Vi hente brukerens nåværende plassering i getPlaces () metoden og lagre den i Util singleton klasse. Vi skaper en annen markør for den posisjonen.

Vis Infobubble Mens Tappet på en Marker

Google map nytte Biblioteket har en stor komponent oppkalt Infobubble for å vise tilpassede informasjonsvinduer. Du kan få en detaljert diskusjon om gjennomføringen på iPhone som infobubble med Sencha Touch. Det meste, skaper vi en ny forekomst av InfoBubble med krever nye config alternativer. Fordi bare én infobubble er vist på et bestemt tidspunkt, vi bare erstatte innholdet av infobubble hver gang den åpnes. Vi holder en referanse til stedet er " referanse
" eiendom som vil være nødvendig å gå til PlaceDetails siden.

Gå til Place Detaljer siden Twitter /** * Trykk på InfoBubble håndtert her * /google.maps.event.addDomListener (ib.bubble_, "klikk", function () {if (me.activeCategoryType) {me.redirectTo ('kategorier /' + me.activeCategoryType + '/' + ib. placeReference);}});

På tappe infobubble, omdirigere vi leseren til en url som kategorier /: type /: referanse. Vi vil håndtere denne delen i en annen kontroller dedikert til å plassere detaljer funksjonalitet.

---

4. Plasser Detaljer

The Place Detaljer siden åpnes opp mens brukeren velger et sted enten fra listen eller fra kartet. Jeg kategorisert detaljene i 3 deler - Info, bildegalleri og anmeldelser. En TabPanel er mest egnet for et slikt oppsett. La oss se hvordan utsikten kan structured:

Views


details.Main

details.Info

details.Gallery

details.GalleryCarousel

details.Review


Controller


PlaceDetails

We skape en annen undergruppe av navnerom og legge alle disse filene inne i "detaljer" katalogen på "visning" -mappen. Dessuten lager vi en egen kontroller som opprettholder bare staddetaljane relaterte funksjoner. Husk å legge alle disse synspunktene og controller i app.js filen.

Vis /Details.Main

Hovedpanelet er et enkelt fane panel med tre barn paneler og en tittellinja.
Ext.define ('Locator.view.details.Main', {forlenge: 'Ext.tab.Panel', xtype: 'detailspanel', config: {CLS: 'detaljer-tabpanel default-bg', fanelinja: {dokket : 'bunn'}, varer: [{xtype: 'info'}, {xtype: 'galleri'}, {xtype: "anmeldelse"}, {xtype: 'tittellinja', dokket: 'top', title: 'Detaljer ', eks: [{text:' Places ', ui: "tilbake", navn:' back_to_placelist '}]}]}});

---

Sted Info

I informasjonsside, Vi vil vise grunnleggende informasjon om stedet, sin nettside, telefon, Google + -profil, og et kart med kun det stedet markøren.

Vis /Details.Info
Ext.define ('Locator.view. details.Info ', {forlenge:' Ext.Container ', xtype:' info ', config: {CLS:' gjennomsiktig detaljer-info ', iconCls:' info ', title: Lang.info, rullbar: true, TPL: . Ext.create ('Ext.XTemplate', document.getElementById ('tpl_place_details_info') innerhtml, {getRating: function (rangering) {return Locator.util.Util.getRating (vurdering); }})}});
Info Mal
<! - Place Detaljer Info side - > < script type = "text /mal" id = "tpl_place_details_info" > < div class = "block content" > < div class = "container" > < div class = "navn" > {name} < /div > < div class = "adresse" > {formatted_address} < /div > {rangering: this.getRating} < /div > < div class = "handlinger" > < div class = "hjemmeside" > < a href = "{hjemmeside}" target = "_ blank" > < div class = "icon" > < /div > < div class = "text" > Website < /div > < /a > < /div > < div class = "phone" > < a href = "tel: {telefon}" > < div class = "icon" > < /div > < div class = "text" > Call < /div > < /a > < /div > < div class = "profil" > < a href = "{url}" target = "_ blank" > < div class = "icon" > < /div > < div class = "text" > Profil < /div > < /a > < /div > < /div > < /div > < div class = "block map" > < /div > < /script >

DIV element med "kart" css klassen brukes senere for å gjengi Google Map. Jeg brukte forskjellig styling i alle detaljene sider - Jeg er ikke inkludert alle disse CSS detaljer i denne opplæringen innhold for å holde det ryddig. Du vil få all den CSS riktig strukturert i prosjektfiler.

info syn er opprettet. Nå må vi laste staddetaljane og anvende sine data i en info-side mal. La oss definere PlaceDetails kontrolleren

Controller /PlaceDetails
Ext.define ('Locator.controller.PlaceDetails', {forlenge:. 'Ext.app.Controller', util: Locator.util.Util, config : {ruter: {'kategorier /: type /: referanse': 'showDetails'}, refs: {hoved: 'main', placeDetailsPanel: 'detailspanel', placeDetailsInfo: 'info', placeDetailsGallery: 'galleri', placeDetailsReview: ' gjennomgang '}, kontroll: {}}});

Vi trenger en showDetails metode som vil skape og åpne details.Main kategorien panel. Mens du velger et bestemt sted, har vi både sin kategori type og sted referanse. Vi trenger å lagre begge disse verdiene - sted henvisning
vil bli brukt for å få en nærmere beskrivelse av stedet og kategorien typen
vil være nødvendig hvis brukeren direkte åpner opp et sted detaljsiden og prøv deretter å gå tilbake til steder liste side

showDetails () Twitter /** * Opprettholde detaljer Panel ruter og vise detaljene panel * /showDetails:. funksjon (categoryType, placeReference) {var meg = dette; (! me.getPlaceDetailsPanel ()). Hvis {me.getMain () til ({xtype: 'detailspanel'}); } Me.util.showActiveItem (me.getMain (), me.getPlaceDetailsPanel ()); //Load sted data me.loadPlaceDetails (placeReference); //Brann de kategori endring og sted endringsaktiviteter //slik at kategorien id og sted referanse kan holdes //noe som er nødvendig hvis brukerne trykker tilbake-knappen me.getApplication () fireEvent ('categorychange', categoryType.); . me.getApplication () fireEvent ('placechange', placeReference);}

Vi fyre både "categorychange" og "placechange" hendelse på Application objekt å lagre den typen og referansen. Også kaller vi de loadPlaceDetails () -metoden passerer stedene respons å hente fullstendig informasjon om det stedet

PHP-funksjonen er ganske enkelt som vi har brukt tidligere.

getPlaceDetails ()
/** * Få staddetaljane sammen med alle foto webadresser. *return String * /public static funksjons getPlaceDetails () {try {$ data = json_decode (selv :: sendCurlRequest ()); $ element = $ data- > resultat; if (isset ($ element-> bilder)) {for ($ i = 0; $ i < telle ($ element-> bilder); $ i ++) {$ element-> bilder [$ i] - > url = BASE_API_URL. "bildet? photoreference =". $ element-> bilder [$ i] - > photo_reference. "& sensor = false". "& maxheight =". IMAGE_MAX_HEIGHT. "& maxwidth =". IMAGE_MAX_WIDTH. "& key =". $ _REQUEST ["Nøkkel"]; }} Avkastning json_encode ($ data); } Catch (Exception $ e) {print "Feil på getPlaceDetails:". $ e- > GetMessage (); }}

Bildene for et sted ikke kommer automatisk - heller, alle bildene er til å bli forespurt separat med sin referanse, api-tasten og dimensjon. Fullstendig informasjon om det finner du her. Vi lagrer alle foto webadresser i en "bilder" eiendom på stedet data.

loadPlaceDetails () Twitter /** * Last fullstendig informasjon om stedet * og gjelder detaljene til alle panelene ' mal i tabpanel * /loadPlaceDetails: function (placeReference) {var meg = dette; me.util.showLoading (me.getPlaceDetailsPanel (), true); Ext.Ajax.request ({url: me.util.api.baseUrl, metode: "GET", params: {handling: me.util.api.details, referanse: placeReference, tast: me.util.API_KEY, sensor: true} suksess: function (respons) {me.util.showLoading (me.getPlaceDetailsPanel (), false); Var json = me.currentLocation = Ext.decode (response.responseText); //Påfør dataene i panelet maler meg . .getPlaceDetailsInfo () setData (json.result); me.getPlaceDetailsGallery () setData (json.result);. me.getPlaceDetailsReview () setData (json.result);. //CShow plasseringen av stedet som en markør meg .showPlaceLocation ();}, svikt: function () {me.util.showMsg (Lang.serverConnectionError);}});}

Når vi får plass detaljene objekt, bruker vi resultatet til hele barnet beholder av Tab Panel fordi alle av dem benytter Sencha mal fnctionality. Også kaller vi showPlaceLocation () metode som skaper et Google-kart, gjør det i infopanelet og vise en markør for stedet i kartet.

showPlaceLocation () Twitter /** * Lag kartet og viser en markør for den posisjonen i kartet * /showPlaceLocation: function () {var meg = dette, showMarker = function () {var location = me.currentLocation.result.geometry.location, latLng = new google.maps.LatLng ( location.lat, location.lng), image = ny google.maps.MarkerImage (ressurser /images /marker.png ', ny google.maps.Size (32, 32), ny google.maps.Point (0, 0 )); //Opprett markør for at plassen me.singleMapMarker = new google.maps.Marker ({posisjoner: latLng, kart: me.gmap, ikon: image}); //Sett markør for å sentrere. En timeout er nødvendig for å kunne //bringe markøren på midten. Annet, vil det bli vist øverst i venstre hjørne Ext.defer (function () {me.gmap.setCenter (latLng);}, 100); }; if (me.singleMap) {me.singleMap.destroy (); } //Lag et kart og gjøre den til visse element me.singleMap = Ext.create ('Ext.Map', {renderTo: ".. Kart" me.getPlaceDetailsInfo () element.down (), høyde: 140, mapOptions : {zoom: 15}, lyttere: {maprender: function (mapCmp, Gmap) {me.gmap = Gmap; showMarker ();}}});}

Så, vi er ferdig med den grunnleggende info siden og dette Slik ser det ut:

---

Place Image Gallery

Vi vil skape en Pinterest stil bildegalleri for stedet bilder og vise full oversikt over bildene i en karusell. Jeg har utviklet en komponent for det samme, og skrev en detaljert blogginnlegg på det som du kan finne her Mosaic bildegalleri med Sencha Touch. De samme komponentene blir brukt her - bare de data egenskaper er forskjellige

Her er hvordan galleriet ser ut.. -webkit-kolonne
eiendom CSS3 er brukt her for å få en mosaikk som oppsett for bildene.

Vis /Details.Gallery
Ext.define ('Locator.view.details .Gallery ', {forlenge:' Ext.Container ', xtype:' galleri ', config: {title: Lang.gallery, iconCls:' photos2 ', CLS:' gjennomsiktig Galleri "rull: true, //Mal vise miniatyrbildene tpl: Ext.create ('Ext.XTemplate', '< tpl if = "this.isEmpty (verdier)" >', '< div class = "tom-tekst tom-gallery" >' , Lang.placeDetails.emptyGallery «< /div > ',' < /tpl > ',' < div class =" galleri body "id =" bilder "> ',' < TPL for =" bilder "> ',' < img src =" {url} "class =" thumbnail "/> ',' < /tpl > ',' < /div > ', {gjelder tom bil: function (resultat) { if (! result.photos || result.photos.length === 0) {return true;} return false;}})}, initial: function () {var meg = dette; //Legg springen hendelse på bildene å åpne karusellen me.element.on ('trykk', funksjon (e, el) {me.showGalleryCarousel (el); }, Meg, {delegat: 'img.thumbnail'}); me.callParent (argumenter); } /** * Vis galleriet karusell med alle bildene * /showGalleryCarousel: function (clickedImage) {var meg = dette, clickedImgIndex = 0; //Kriterier alle bildene og lagre i en rekke me.images = me.element.query ('img.thumbnail'); //Opprett Gallery Carousel Var galleryCarousel = Ext.Viewport.add ({xtype: 'gallerycarousel', bilder: me.images}); //På klikke nær ikon, skjule karusellen //og ødelegge den etter en viss perdiod galleryCarousel.element.on ('trykk', funksjon (e, el) {galleryCarousel.hide (true); Ext.defer (function () {Ext.Viewport.remove (galleryCarousel);}, 300);}, dette {delegat: 'div [data-action = "close_carousel"]'}); //Få bildeindeksen som klikkes mens {clickedImgIndex ++ ((clickedImage = clickedImage.previousSibling) = null!); } //Sett klikket bilde container som aktiv element av karusellen galleryCarousel.setActiveItem (clickedImgIndex); //Vis karusellen galleryCarousel.show (); }});
Vis /Details.GalleryCarousel
Ext.define ('Locator.view.details.GalleryCarousel', {strekker: 'Ext.carousel.Carousel', xtype: 'gallerycarousel', config: {fullskjerm : true, modal: true, bilder: [], html: '< div class = "close-gallery" data-action = "close_carousel" > < /div >', CLS: galleri-karusellen ', showAnimation : 'Popin', hideAnimation: 'ventilasjons', indikator: falske, lyttere: {initial: 'changeImageCount', //Ring image teller kontrolløren for hvert bilde endring activeitemchange: 'changeImageCount'}}, initial: function () {var meg < /div > < /a > < span > < /div > < /div > < /div > < /div > < /div > < /div >

Previous:Bygg et fly spill med Sprite Kit

Next Page:Sjekk ut den nye anbefalte ressurser på Mobile Development