[GIS] How to load MapPanel to TabPanel

ext-jsgeoext

I use extjs4.1 with geoext2 in my web app.
I want to load mapPanel to tabPanel via ajax and it fill tabPanel height and width.
If i set mapPanel height and width i can see it in tabPanel but it can't fill tabPanel because i set it height and width.Following code: 

mapPanel = Ext.create("GeoExt.panel.Map", {
            renderTo: "mappanel",
            height: 575,
            width: 1124,
            map:map,
            zoom: 11,
            tbar : toolbar
        });
var tabs = Ext.create('Ext.tab.Panel', {
            region: 'center', // a center region is ALWAYS required for border layout
            deferredRender: false,
            activeTab: 0,     // first tab initially active
            items: [{
                title: 'History',
                autoScroll: true
            }, {
                title: 'Center Panel',
                autoScroll: true
            }]
        });

I insert MapPanel to tabPanel when user click on grid column that has icon via following code. 

var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns: [
            {
                menuDisabled: true,
                sortable: false,
                xtype: 'actioncolumn',
                width: 20,
                items: [{
                    icon   : '<?php echo Yii::app()->baseUrl.'/images/icons/show.png';?>',
                    tooltip: 'Show Map',
                    handler: function(grid, rowIndex, colIndex) {
                        var rec = store.getAt(rowIndex);
                        var jsonData = Ext.encode(store.proxy.reader.jsonData);
                        tabs.remove(tabs.getComponent(2));
                        tabs.insert(2,{
                            title:'Map',
                            layout: 'fit',
                            loader: {
                                scripts: true,
                                autoLoad :true,
                                params:{
                                    history:jsonData,
                                    index:rowIndex
                                },

                                failure : function(){
                                    alert('failed');
                                },
                                url: '<?php echo Yii::app()->createUrl('MapWidget/HistoryMap');?>'

                            }
                        });
                        tabs.setActiveTab(2);
                        tabs.doLayout();
                       }
                }]
            },
...

But when i clean height and width in mapPanel options i can't see it in tabPanel!
How can i load mapPanel to tabPanel to fill it's content?

Best Answer

I make in my programs this solution (code below), using 'ux.GMapPanel' (GMapPanel.js) :

items: [{
            xtype: 'gmappanel',
            name:  'map',
            zoomLevel: 16,
            width: '100%',
            height: 360,
            gmapType: 'map',
            mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
            mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
            title: 'Map of Local',
            id: 'my_map1',
            listeners:{
                    'move':{
                        fn:function(){
                            if (this.y < 0) this.setPosition(this.x,0);
                        }
                        }
                  },
            setCenter: {
                         marker: {title: 'Local'}, 
                         geoCodeAddr: ''+variable of address for map+'',

            },

        }]
Related Question