Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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,
            zoom: 11,
            tbar : toolbar
var tabs = Ext.create('', {
            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);
                            layout: 'fit',
                            loader: {
                                scripts: true,
                                autoLoad :true,

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


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?

share|improve this question

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',
                            if (this.y < 0) this.setPosition(this.x,0);
            setCenter: {
                         marker: {title: 'Local'}, 
                         geoCodeAddr: ''+variable of address for map+'',


share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.