Results 1 to 3 of 3

Thread: Map within a nested panels

  1. #1
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
      0  

    Question Map within a nested panels

    There was a related question: http://www.sencha.com/forum/showthre...p-with-Toolbar
    It was advised to create a wrapping component with toolbar. I have the same issue, but I need to put them inside another component.
    So I want a map with top and bottom bars. I do the following:
    1) Controller. I have my views in app/view/search/
    Here I just include them. We actually need only MapPage now
    Code:
    Ext.define('CJ.controller.Search', {
    	extend: 'Ext.app.Controller',
    	views: [
    		'search.MapPage',
    		'search.ListViewPage',
    		'search.FilterPage'
    	],
    .....
    2) MapPage. Basically it holds a global toolbar for the page docked to the top and a custom map control as a single item of a page for now.
    Code:
    Ext.define('CJ.view.search.MapPage', {
    	extend: 'CJ.view.Page',
    	alias: 'widget.searchMapPage',
    	requires: ['CJ.view.search.MapPanel',//requiring MapPanel, the custom map control
    'CJ.view.search.Map'], //and the extended map itself, I'll be adding some marker rendering logic there
    	config: {
    		layout: 'fit',
    		items: [
    			{
    				xtype: 'toolbar',
    				items: [
    					{
    						xtype: 'spacer'
    					},
    					{
    						xtype: 'navButtonNavigate',
    						text: CJ.t('Filter list view'),
    						ui: 'round',
    						page: 'searchFilterPage'
    					}
    				],
    				docked: 'top'
    			},
    			{
    				xtype: 'mapcontrol'
    			}
    		]
    	}
    });
    3) MapPanel. Component that holds the map and top/bottom bars:
    Code:
    Ext.define('CJ.view.search.MapPanel', {
    	extend: 'Ext.Panel',
    	alias: 'widget.mapcontrol',
    	requires: ['CJ.view.search.Map'],//this is extended map control
    	layout: 'fit',
    	config: {
    		items: [
    			{
    				xtype: 'panel',
    				html: ' 30.00 Electronic',
    //				height: 50,
    				ref: 'dealDetail',
    				docked: 'top'
    			},
    			{
    				xtype: 'searchMap',
    				ref: 'map'
    			},
    			{
    				xtype: 'panel',
    				html: 'Falcon street 25, 81541 Munchen',
    				docked: 'bottom'
    			}
    		]
    	}
    });
    4) Map control. Nothing special, just extension for now.
    Code:
    Ext.define('CJ.view.search.Map', {
    	extend: 'Ext.Map',
    	alias:'widget.searchMap',
    	config: {
    		useCurrentLocation: true
    	}
    });
    The main problem is that layout:fit does not set correct height for the innermost map component. I could not find what the problems is, but now it simply does not show anything in the panel. Top and bottom bars are in their places. The DIV for the map (created by layout) is there, dimensions are correct.
    I did the hack now to make it work (MapPanel):
    Code:
    constructor: function () {
    
    	this.callParent(arguments);
    	this.on('painted', this.fixMap, this);
    },
    fixMap: function(){
    	this.map = this.down('[ref=map]');
    	this.map.setHeight(this.getEl().down('.x-body').getHeight()); //dirty hack! TODO: fix this
    }
    This does the job, but it's not the full solution: I need to handle resize, destroy etc. This also degrades performance a bit.

    How can this be fixed correctly? Is the deep component nesting a problem here?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Vote Rating
    1271
      0  

    Default

    In your CJ.view.search.MapPanel class, you have set the layout outside of the config object. So the layout needs to be within the config object.

    Another thing is it looks like you are trying to use fit layout when you have 3 items specified. You need to use a different layout like vbox and specify flex on the map.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
      0  

    Default

    Thanks a lot!

    Still mixing that config with ExtJS4, it is not necessary to specify it there in config:{}
    I'm using fit with three items, but those two are docked. The problem is fixed now, thanks a lot, Sencha Touch ninja

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
  •