Results 1 to 3 of 3

Thread: List Selections and loading new views (e.g. Maps tab).

  1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    18
    Vote Rating
    0
      0  

    Default List Selections and loading new views (e.g. Maps tab).

    I am trying to make a touch selection in a list view load my apps google map tab and open a google Infowindow bubble for the given selection. I have been looking at the kiva app for some pointers ut have yet to find a good tutorial or explanation of selection methods.

    What I know now is I need to be working with something like the "selectionchange" param in the Ext.list to call the tab and open the infowindow. MY app is based of the guide app in sencha touch.

    What I have:

    Code:
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        onReady: function() {
            var timeline = new Ext.List({
                title: 'Deal List',
                cls: 'timeline',
                scroll: 'vertical',
    			singleSelect: true,
    			itemSelector: 'div.tweet',
                tpl: [
                    '<tpl for=".">',
                    '<div class="tweet">',
    				'<tpl for="gd$customProperty[4]">',
                    '<div class="avatar"><img src="{[values["$t"]]}"/></div>',
                    '</tpl>',
    				'<div class="tweet-content">',
                    '<h2>{from_user}</h2>',
    				'<tpl for="gd$customProperty[0]">',
    				'<h2>{[values["$t"]]}</h2>',
    				'</tpl>',
                    '<p>{category}</p>',
                    '</div>',
                    '</div>',
                    '</tpl>'
                ],					
            });
    		
    			
    			
    			
    		
    
            var refresh = function() {
               // var coords = position || map.geo.coords;
     //           if (coords) {
      //              map.update(coords);
    
                    Ext.util.JSONP.request({
                        url: 'http://maps.google.com/maps/feeds/features/110714523030907152027/0004910ab55c9b338860d/snippet',
                        callbackKey: 'callback',
                        params: {
                            lat: map.map.getCenter().lat() , 
                            lng: map.map.getCenter().lng() ,
    						radius: '100000' ,
    						alt: 'json',
                        },
                        callback: function(data) {
                            if (data && data.feed.entry && !!data.feed.entry.length) {
                                var entry = data.feed.entry
    
                                // Update the tweets in timeline
                                timeline.update(entry);
    
                                // Add points to the map
                                for (var i = 0, ln = entry.length; i < ln; i++) {
                                    addMarker(entry[i]);
                                }
                            } else {
                                timeline.getContentTarget().update('No Results Available');
                            }
                        }
                    });
    //            }
            };
    		
    		 infowindow = new google.maps.InfoWindow({
                    content: 'Sencha Touch HQ'
                });
    
            var map = new Ext.Map({
                title: 'Map',
                getLocation: true,
                mapOptions: {
                    zoom: 15
                },
                listeners: {
                    maprender: function(mapC, map) {
                        refresh();
     //                   this.geo.on('update', refresh);
    					
    
    						
                    }
                }
            });
    
            ;
    
            var panel = new Ext.TabPanel({
                fullscreen: true,
                animation: 'cardslide',
                items: [map, timeline]
            });
    
    
            var markers = {};
            // These are all Google Maps APIs
            var addMarker = function(entry) {
    			
                var pos = entry.content.kml$Placemark[0].kml$Point[0].kml$coordinates[0].$t.split(',');
    
                    
                    var marker = new google.maps.Marker({
                        map: map.map,
                        title: 'whatever',
    					clickable: true,
                        position: new google.maps.LatLng(pos[1], pos[0]),
    					Icon: entry.gd$customProperty[4].$t
                    });
    				
    				
    
    			google.maps.event.addListener(marker, "click", function() {
    	      tweetBubble.setContent(entry.gd$customProperty[0].$t);
    		  tweetBubble.open(map.map, marker);		
    			});
    				
            };
    
    //		I have no clue why I need to define tweetbubble outside var add marker (cite: http://github.com/nelstrom/GeoTweets/blob/5b6db3cf0850861d008ca4e5b1c1a57b31bc1afd/javascripts/geotweets.js_
    		tweetBubble = new google.maps.InfoWindow(
    			);
    
            var tabBar = panel.getTabBar();
            tabBar.addDocked({
                cls: 'refreshBtn',
                xtype: 'button',
                ui: 'plain',
                iconMask: true,
                iconCls: 'refresh',
                dock: 'right',
                stretch: false,
                align: 'center',
                handler: refresh
            });
            tabBar.doComponentLayout();
        }
    });

  2. #2
    Sencha User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,011
    Vote Rating
    940
      0  

    Default

    Listen to the itemtap event on the list.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    18
    Vote Rating
    0
      0  

    Default

    Right so I have the event listener and the alert gives me the message.

    Code:
    var timeline = new Ext.List({
                title: 'Deal List',
                cls: 'timeline',
                scroll: 'vertical',
    			singleSelect: true,
    			itemSelector: 'div.tweet',
                listeners: {
    				"itemtap": function(list, index, item, e) {
    					
                	    alert('itemtap');
                     }
    			},
                tpl: [
                    '<tpl for=".">',
                    '<div class="tweet">',
    				'<tpl for="gd$customProperty[4]">',
                    '<div class="avatar"><img src="{[values["$t"]]}"/></div>',
                    '</tpl>',
    				'<div class="tweet-content">',
                    '<h2>{from_user}</h2>',
    				'<tpl for="gd$customProperty[0]">',
    				'<h2>{[values["$t"]]}</h2>',
    				'</tpl>',
                    '<p>{category}</p>',
                    '</div>',
                    '</div>',
                    '</tpl>'
                ],				
            });
    but I still am unsure how to:

    a. Pop the map view. (something with the "map" variable no doubt)

    b. Open the corresponding Infowindow for the map marker.

Similar Threads

  1. outline - open views (different database) in different tab
    By Bojana Gnjato in forum Ext.nd for Notes/Domino
    Replies: 3
    Last Post: 26 Jul 2009, 5:56 AM
  2. Problem with a panel inside a tab inside google maps
    By Jangla in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 4 Mar 2009, 9:14 AM
  3. [Desktop 2.0] Live-Maps / Google-Maps Module v0.1
    By franckxx in forum Community Discussion
    Replies: 10
    Last Post: 22 Mar 2008, 1:00 AM
  4. Prevent loading tab content each time tab is clicked
    By freakishmisko in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 25 Mar 2007, 10:03 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •