1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      0  

    Question Unanswered: Sencha Touch 2 + OpenLayers: how to render a map into a child component of a panel?

    Unanswered: Sencha Touch 2 + OpenLayers: how to render a map into a child component of a panel?


    I am using OpenLayers to create a map; what I want to do is:
    1. Create a Panel container (ID = 'parentPanel'), which has two items, a bottom toolbar and a component (or a panel, ID= 'childPanel')
    2. Render map into childPanel

    So I tried following code, which is modified from a simple app using (Sencha Touch 1 + OpenLayers). The interesting part is: If I want to render map into childPanel, map object is created, but it doesn't show in childPanel; But if I render map into parentPanel, the map shows up, however, this is not what I want, since I want to use toolbar for some tools...

    anybody tell me what's happening? thanks a lot!
    also, I don't understand why the painted event listener was triggered twice...
    (following code is copy-and-run)
    Code:
    <!DOCTYPE html><html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" href="http://docs.sencha.com/touch/2-0/touch/resources/css/sencha-touch.css" type="text/css">
        <script type="text/javascript" src="http://dev.openlayers.org/releases/OpenLayers-2.11/lib/OpenLayers.js"></script>
        <script type="text/javascript" src="http://docs.sencha.com/touch/2-0/touch/sencha-touch-all.js"></script>
        <script type="text/javascript">
        // initialize map when page ready
        var map, layer;
            function init(renderDiv){
                map = new OpenLayers.Map( renderDiv);
                layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
                map.addLayer(layer);
                map.setCenter(
                    new OpenLayers.LonLat(-71.147, 42.472).transform(
                        new OpenLayers.Projection("EPSG:4326"),
                        map.getProjectionObject()
                    ), 4
                );    
            }
            
        Ext.setup({
            onReady : function() {            
                Ext.create('Ext.Panel', {
                    id: 'parentPanel',
                    fullscreen: true,
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'toolbar',
                            title:  'OSM Map',
                            docked: 'bottom'
                        },
                        {
                            xtype: 'component', //xtype: 'panel'
                            scroll: false,
                            monitorResize: true,
                            id: "childPanel",
                            width: "100%",
                            height: "100%",
                            listeners: {
                                painted: function(){
                                    console.log("map painted");  //run twice, don't understand why...
                                    if(!map)
                                    {
                                        init('childPanel'); //doesn't show anything, although map object is created...
                                        //init('parentPanel'); //show map.. but I want 'childPanel' show map, and put it into 'parentPanel' container...
                                    }
                                }
                            }
                        }
                    ]
                });
            }
        });
    
    
        </script>
    </head>
    <body>
    </body>
    </html>

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You need to wait till the component is painted (event is painted) and then you can render anything into the element.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    14
    Answers
    1
    Vote Rating
    2
    Simon.liu is on a distinguished road

      0  

    Default


    thanks for your reply!

    I did use 'painted' event listener, the funny thing is it only render map in parentPanel, not work in childPanel...

  4. #4
    Sencha User
    Join Date
    Dec 2012
    Location
    Bucharest, Romania
    Posts
    2
    Vote Rating
    0
    bogdandd is on a distinguished road

      0  

    Default It works fine with ST2.1

    It works fine with ST2.1


    I changed the libraries and css loaded this way:
    <link rel="stylesheet" href="./lib/sencha-touch-2.1.0/resources/css/sencha-touch.css" type="text/css"/>
    <script type="text/javascript" src="./lib/sencha-touch-2.1.0/sencha-touch-all-debug.js"></script>
    <script type="text/javascript" src="./lib/OpenLayers-2.12/OpenLayers.mobile.debug.js"></script>


    and it works OK with init('childPanel');
    and with init('parentPanel');

    Thank you!
    Bogdan