1. #1
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default Unanswered: Display a Map after clicking last level of Nested List

    Unanswered: Display a Map after clicking last level of Nested List


    Hi!

    I have a small app with 3 tabs in a tab panel:

    - welcome screen
    - map (google)
    - nested list (1 level with html details)

    Code:
    Ext.create("Ext.tab.Panel", {
    	//layout: 'card',
    	fullscreen: true,
    	tabBarPosition: 'bottom',
    	items: [
    		{
    			title: 'Home',
    			iconCls: 'home',
    			cls: 'home',
    			scrollable: true,
    			html: [
    				'<center><br>Welcome<br></center>'
    			].join("")
    		},
    		{
    			title: 'Map',
    			iconCls: 'maps',
    			xtype: 'map',
    			useCurrentLocation: true
    		},
    		{
    			xtype: 'nestedlist',
    			title: 'Itinerary',
    			iconCls: 'maps',
    			displayField: 'title',
    			store: {
    				type: 'tree',
    				fields: [
    					'title', 'content',
    					{name: 'leaf', defaultValue: true}
    				],
    				root: {
    					leaf: false
    				},
    				proxy: {
    					type: 'ajax',
    					url: 'steps.json',
    					reader: {
    						type: 'json',
    						rootProperty: 'steps'
    					}
    				}
    			},
    			detailCard: {
    				xtype: 'panel',
    				scrollable: true,
    				styleHtmlContent: true
    			},
    			listeners: {
    				itemtap: function(nestedList, list, index, element, post) {
    					this.getDetailCard().setHtml(post.get('content'));
    				}
    			}
    		}
    	]
    });
    I want to update my app with another tab, with a nested list.

    The nested list is like this:

    Europe
    .....Italy
    ..........Rome -> Map
    ..........Milan -> Map
    .....Spain
    ..........Madrid -> Map
    Asia
    .....Russia
    ..........Moscow -> Map
    .....China
    ..........Pechino -> Map

    After clicking the last item (Rome,Milan,Madrid,Moscow,Pechino), I need to display the relative map giving some coordinates.

    How can I do that?

    Please, can you give me an example?

    Thanks in advance!

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,004
    Answers
    3489
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    The detailCard config, why not have it be a map?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default


    Hi, thanks for the answer.

    I have done this:

    Store: maps.json
    Code:
    {
        "items": [
            {
                "text": "Morning",
                "leaf": true
            },
            {
                "text": "Afternoon",
                "leaf": true
            }
        ]
    }
    App:

    Code:
    Ext.define('ListItem', {
        extend: 'Ext.data.Model',
        config: {
            fields: ['text']
        }
    });
    
    var storeMaps = Ext.create('Ext.data.TreeStore', {
        model: 'ListItem',
        defaultRootProperty: 'items',
        proxy: {
            type: 'ajax',
            url: 'maps.json'
        }
    });
    
    Ext.create("Ext.tab.Panel", {
        //layout: 'card',
        fullscreen: true,
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Home',
                iconCls: 'home',
                cls: 'home',
                scrollable: true,
                html: [
                    'Welcome'
                ].join("")
            },
            {
                xtype: 'nestedlist',
                title: 'Maps',
                iconCls: 'maps',
                displayField: 'text',
                store: storeMaps,
                detailCard: {
                    title: 'Map',
                    iconCls: 'maps',
                    xtype: 'map',
                    useCurrentLocation: true
                }
            }
        ]
    });
    Everytime I tap on the leaf of my list I see the map with current location.

    Now, how can I tell to the map the latitude and longitude to display, according to the tapped item?

    How can I pass to the map parameters dinamically?

    The next step for me is also to set markers on each map.

    Thanks in advance for attention!

  4. #4
    Sencha User
    Join Date
    Apr 2009
    Posts
    14
    Answers
    1
    Vote Rating
    0
    Smeraldo is on a distinguished road

      0  

    Default


    Now, how can I tell to the map the latitude and longitude to display, according to the tapped item?

    How can I pass to the map parameters dinamically?

    The next step for me is also to set markers on each map.
    Any suggestion?

Thread Participants: 1

Tags for this Thread