Results 1 to 2 of 2

Thread: Openlayer Map

  1. #1
    Sencha User
    Join Date
    Jan 2015
    Posts
    3

    Default Openlayer Map

    I have create MVC app in Sencha - there are two views one has openlayer map and other has grid data- i want to show map in south panel and grid in north panel but the open layer map doesn't show in panel - Can anyone help me to solve the problem -
    Code:
    FIRST VIEW :
    Ext.define('PrjApp.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.userlist',
    var mappanel = Ext.widget('useredit');
    var resultsPanel = Ext.create('Ext.panel.Panel', {
            title: 'Results',
            width: '100%',
            height: '100%',
            renderTo: Ext.getBody(),
            layout: {
                type: 'hbox', // Arrange child items vertically
                align: 'stretch', // Each takes up full width
                padding: 5
            },
            items: [{ // Results grid specified as a config object with an xtype of 'grid'
                xtype: 'grid',
                store: Ext.data.StoreManager.lookup('simpsonsStore'),
                columns: [{
                text: 'Name',
                dataIndex: 'name'
                }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
                }, {
                text: 'Phone',
                dataIndex: 'phone'
                        }],
                flex: 1 // Use 1/3 of Container's height (hint to Box layout)
            }, {
                xtype: 'splitter' // A splitter between the two child items
            }, { // Details Panel specified as a config object (no xtype defaults to 'panel').
                title: 'Details',
                bodyPadding: 5,
                items: [mappanel], // An array of form fields
                flex: 2 // Use 2/3 of Container's height (hint to Box layout)
            }]
        });          
           
    }
    });
    SECOND VIEW :
    Code:
    Ext.define('PrjApp.view.user.Edit', {
        extend: 'Ext.window.Window',
        alias : 'widget.useredit',
    
       
       // layout: 'fit',
    
        border: 'false',
        //layout: 'fit',
         region: 'west',
       width: 200,
        // GeoExt.panel.Map-specific options :
        center: '12.3046875,51.48193359375',
        zoom: 6,
        initComponent: function() {
        var me = this;
        var map = new OpenLayers.Map("map-id");
     
            map.addControl(new OpenLayers.Control.LayerSwitcher());
     
            var wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS - Basic",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'}
            );
     
            map.addLayers([wms]);
     
            var mappanel = Ext.create('GeoExt.panel.Map', {
                title: 'Simple Web Map',
               //width: '30%',
               //height: '30%',
                map: map,
               region: 'north',
            });
    
      
           
              Ext.create('Ext.container.Viewport', {
              // width: '30%',
              // height: '30%',
               renderTo: Ext.getBody(),
              layout: {
                 type: 'card', // Arrange child items vertically
                 //align: 'center' // Each takes up full width
                            
            },
     
                items: [mappanel]
            });
     
    
    
            me.callParent(arguments);
        }
    });

  2. #2
    Sencha Premium User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    781
    Answers
    102

    Default

    You'll likely need to wait until the component has rendered before trying to create the map instance.

    The fiddle below demonstrates the use of a LeafletJS map being rendered into a panel's body element in boxready event listener.

    Regards,
    Brian

    Last edited by lumberjack; 30 Jan 2015 at 6:51 AM. Reason: Adding the fiddle link

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •