1. #1
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default Answered: How to place a Google Map side by side with another panel?

    Answered: How to place a Google Map side by side with another panel?


    Hi.

    I am new on Sencha Touch but I am facing a problem. I would like to place Google Maps side by side with another Panel.
    How can I achieve this?

    I tried the different layouts but without any good results.

    Any help will be appreciated.

    Thanks

  2. This works for me in PR2:

    Code:
    Ext.application({
        launch: function()  {
            Ext.Viewport.add({
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                defaults: {
                    flex: 1
                },
                items: [
                    {
                        html: 'html',
                        style: 'background:lightgray'
                    },
                    {
                        xtype: 'map',
                        getLocation: true,
                        mapOptions: {
                            zoom: 12
                        }
                    }
                ]
            });
        }
    });


    Ensure you have the Google Maps API file loaded.

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default


    Thanks for your quick reply. I did the following but the map is not being shown:

    var map = new Ext.Map({
    title: 'Map', // Name that appears on this tab
    getLocation: true, // Gets user's current location
    mapOptions: { // Used in rendering map
    zoom: 12
    }
    });


    Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
    {
    html: 'message list',
    style: 'background-color: #5E99CC;',
    flex: 1
    },
    {
    items: [map],
    flex: 2
    }
    ]
    });

  5. #4
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    This works for me in PR2:

    Code:
    Ext.application({
        launch: function()  {
            Ext.Viewport.add({
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                defaults: {
                    flex: 1
                },
                items: [
                    {
                        html: 'html',
                        style: 'background:lightgray'
                    },
                    {
                        xtype: 'map',
                        getLocation: true,
                        mapOptions: {
                            zoom: 12
                        }
                    }
                ]
            });
        }
    });


    Ensure you have the Google Maps API file loaded.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #5
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default


    Can you send me the complete code? Thanks a lot

  7. #6
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default


    Already put it to work. thanks

  8. #7
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default


    I have another question. Instead of placing
    {
    xtype: 'map',
    getLocation: true,
    mapOptions: {
    zoom: 12
    }
    }

    can I refer a variable previously defined (like var mapdemo = Ext.create('Ext.Map', ...)?

  9. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Yup.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  10. #9
    Sencha User
    Join Date
    Dec 2009
    Posts
    9
    Vote Rating
    0
    pinker is on a distinguished road

      0  

    Default


    How can I do that?
    When trying to put something like below does not work.

    <code>
    var map = new Ext.Map({
    title: 'Map', // Name that appears on this tab
    getLocation: true, // Gets user's current location
    mapOptions: { // Used in rendering map
    zoom: 12
    }
    });


    Ext.application({
    launch: function() {
    Ext.Viewport.add({
    layout: {
    type: 'hbox',
    align: 'stretch'
    },
    defaults: {
    flex: 1
    },
    items: [
    {
    html: 'html',
    style: 'background:lightgray'
    },
    {
    items: [map]
    }
    ]
    });
    }
    });
    </code>

  11. #10
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    You do not need to put it inside another items: []. That means that your second panel (on the right side, where the map was before) is now another container, and you are adding the map to that container.

    Instead, just do the following:

    Code:
    Ext.application({
        launch: function()  {
            var map = Ext.create('Ext.Map', {
                getLocation: true,
                mapOptions: {
                    zoom: 12
                }
            });
    
            Ext.Viewport.add({
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                defaults: {
                    flex: 1
                },
                items: [
                    {
                        html: 'html',
                        style: 'background:lightgray'
                    },
                    map
                ]
            });
        }
    });
    Notice how I am adding it as an item:

    Code:
                items: [
                    {
                        html: 'html',
                        style: 'background:lightgray'
                    },
                    map
                ]
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi