1. #1
    Sencha User
    Join Date
    Jan 2015
    Posts
    3
    Vote Rating
    0
    tameen is on a distinguished road

      0  

    Default Unanswered: 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 User lumberjack's Avatar
    Join Date
    Nov 2014
    Location
    Kansas
    Posts
    779
    Vote Rating
    36
    Answers
    101
    lumberjack has a spectacular aura about lumberjack has a spectacular aura about

      0  

    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

Thread Participants: 1

Tags for this Thread