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!