Display a Map after clicking last level of Nested List

[Smeraldo]

Hi!

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

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

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!

[mitchellsimoens]

The detailCard config, why not have it be a map?

[Smeraldo]

Hi, thanks for the answer.

I have done this:

Store: maps.json

{
    "items": [
        {
            "text": "Morning",
            "leaf": true
        },
        {
            "text": "Afternoon",
            "leaf": true
        }
    ]
}

App:

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!

[Smeraldo]

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?