How can i add google map into a tabpanel in Sencha Touch?

Question

I am new in Sencha Touch framework. I have a situation to place a map into a tabpanel. I make a view page which extends Ext.tab.Panel. But I can not add a map inside a tab of that tabpanel. So please help me to add a map into the tabpanel. One of the tab item is as follows..

{
                title: 'Candidate',
                iconCls: 'user',

                styleHtmlContent: true,
                items: [{
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Candidates',
                    items: [{
                        xtype: 'button',
                        iconCls: 'list',
                        align: 'left',
                        handler: function (){
                            Ext.Viewport.toggleMenu('left');
                        }
                    },{
                        xtype: 'button',
                        iconCls: 'search',
                        align: 'right'
                    }]
                },
                {
                    xtype: 'fieldset',
                    ui: 'topbutton',
                    layout: {
                        type: 'hbox',
                        align: 'center',
                        pack: 'center'
                    },
                    items: [{
                            xtype: 'button',
                            text: 'List',
                            width:100,
                            handler: function(){
                                var candidatelistView = Ext.Viewport.add(Ext.create('Proximity.view.CandidatelistView'));
                                Ext.Viewport.setActiveItem(candidatelistView);
                            }
                        },{
                            xtype: 'button',
                            text: 'Map',
                            width:100
                        }
                    ]
                },{
                    xtype: 'container',
                    title: 'One',
                    items: [
                        {
                            xtype: 'map'
                        }
                    ]
                }]
            }

Thank you,

What's the error? Did you add the requires: ['Ext.Map'] in your app config? — koni

Martin Martin · Accepted Answer · 2014-08-01T23:06:09

When I ran your code I got the following error:

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

This error is a little bit misleading. But it basically says that at least one of your tabPanel items is not configured correctly. In your case it's the fieldset item. You forgot to provide a title.

Additionally you have to provide a width and height configuration for your map. Just set it to 100% both.

Ext.define("MyApp.view.MyTabPanel", {
    extend: "Ext.tab.Panel",

    config: {
        fullscreen: true,
        tabBarPosition: 'bottom',

        defaults: {
            styleHtmlContent: true
        },

        items: [
            {
                docked: 'top',
                xtype: 'titlebar',
                title: 'Candidates',
                items: [{
                    xtype: 'button',
                    iconCls: 'list',
                    align: 'left',
                    handler: function (){
                        Ext.Viewport.toggleMenu('left');
                    }
                },{
                    xtype: 'button',
                    iconCls: 'search',
                    align: 'right'
                }]
            },
            {
                xtype: 'fieldset',
                title: "test",
                ui: 'topbutton',
                layout: {
                    type: 'hbox',
                    align: 'center',
                    pack: 'center'
                },
                items: [{
                        xtype: 'button',
                        text: 'List',
                        width:100,
                        handler: function(){
                            var candidatelistView = Ext.Viewport.add(Ext.create('Proximity.view.CandidatelistView'));
                            Ext.Viewport.setActiveItem(candidatelistView);
                        }
                    },{
                        xtype: 'button',
                        text: 'Map',
                        width:100
                    }
                ]
            },{
                xtype: 'container',
                title: 'One',

                items: [
                    {
                        xtype: 'map',
                        height: "100%",
                        width: "100%"
                    }
                ]
            }
        ]
    }
});

How can i add google map into a tabpanel in Sencha Touch?

1 Answers