Add a Map in a Tab Panel

[Smeraldo]

Hi,

how can I add a Map in a Tab Panel?

Here is my code:

Ext.create("Ext.tab.Panel", {
    fullscreen: true,
    tabBarPosition: 'bottom',
    items: [
        {
            title: 'Home',
            iconCls: 'home',
            cls: 'home',
            scrollable: true,
            html: [
                '<center><br>Welcome!</center>'
            ].join("")
        },
        {
            title: 'Map',
            iconCls: 'maps',
            scrollable: true,
            html: [
                '<center><br>Map here...<br></center>'
            ].join("")
        },
        {
            xtype: 'nestedlist',
            title: 'Steps',
            iconCls: 'star',
            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 need to insert a Map with markers in the second tab of my Panel.

Thanks in advance!

[jay@moduscreate.com]

use the map component there. There is an example showing you how to do it.

[Smeraldo]

use the map component there. There is an example showing you how to do it.

Thanks, but... where can I find the example?

I have found just this one: http://docs.sencha.com/touch/2-0/#!/example/maps

[Smeraldo]

If I do this:

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("")
        },
        {
            xtype: 'map',
            useCurrentLocation: true
        }
    ]
});

I receive this error from the console:

Uncaught Error: [ERROR][Ext.Container#doAdd] Adding a card to a tab container without specifying any tab configuration

Edit:

adding "title" and "iconCls" I have no errors, but I have a blank area instead of the map...

Here my 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
        }
    ]
});

[lexan1982]

I have blank area only at the iOS. In the Web and in the Android device all right.
Why?

[lexan1982]

I see example map

1. sencha phonegap init
2. sencha app build native
3. at the Xcode project change config.xml

// disable it 
//<access origin="http://127.0.0.1*" />

<access origin="*" /> // work