1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Vote Rating
    0
    tah_206207 is on a distinguished road

      0  

    Default Unanswered: MapPanel in TabPanel to fill it's content

    Unanswered: MapPanel in TabPanel to fill it's content


    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:
    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.
    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?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,000
    Answers
    666
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You code seem incomplete .. where are you calling mapPanel? If you are setting your height/width in ajax, it will not work as the call will return with the values after the rendering ..

    Scott.

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    6
    Vote Rating
    0
    tah_206207 is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottmartin View Post
    You code seem incomplete .. where are you calling mapPanel? If you are setting your height/width in ajax, it will not work as the call will return with the values after the rendering ..

    Scott.
    I calling map panel with below code:
    Code:
    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');?>'                                }
    You can see loader and url of map panel code at above code.
    map panel code:
    Code:
    mapPanel = Ext.create("GeoExt.panel.Map", {                renderTo: "mappanel",                height: 575,                width: 1124,                map:map,                zoom: 11,                tbar : toolbar            });
    when i remove height and width from map panel options loader can't load map panel into tab panel!
    Is there better way to import map panel to tab panel to fill it's content?