1. #1
    Sencha User KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      0  

    Question Map within a nested panels

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    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


    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 @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 KJedi's Avatar
    Join Date
    Feb 2008
    Location
    Ukraine, Mykolayiv
    Posts
    145
    Vote Rating
    1
    KJedi is on a distinguished road

      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

Thread Participants: 1

Tags for this Thread