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: [
			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) {
I want to update my app with another tab, with a nested list.

The nested list is like this:

..........Rome -> Map
..........Milan -> Map
..........Madrid -> Map
..........Moscow -> Map
..........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!