Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
add comment

1 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+'',

            },

        }]
share|improve this answer
add comment

Your Answer

 
discard

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.