Touch PR3: using map as xtype inside of a toolbar panel

[davidchan]

Hi,

I'm pretty new to ST in general. I've also been following a MVC architecture and using lazy instantiations for components.

I'm trying to get GoogleMaps to show up inside of a toolbar panel, but it doesn't seem to work while testing on Safari 5 and iOS Simulator. I've included GMaps api and have gotten the notification prompt that asks if you want to give away your current location. The map doesn't show, I'm guessing it's a layout issue.

Below is a snippet of code used (see bold), thanks for the help!

Ext.define('MyApp.view.SearchIndex', {
    extend: 'Ext.tab.Panel',
    
    xtype: 'searchindex',


    config: {
        activeItem: 0,
        tabBarPosition: 'top',
        tabBar: {
            layout: {
                pack: 'center'
            }
        },
        items: [
            {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Search',
                ui: 'light'
            },
            
            {
                title: 'Proximity',
                xtype: 'panel',
                items: [
                    {
                        xtype: 'container',
                        fullscreen: true,
                        items: [
                            {
                                xtype: 'map',
                                fullscreen: true,
                                useCurrentLocation: true
                            }
                        ]
                    }
                ]
            },
            
            {
                title: 'Quick',
                xtype: 'panel',
                config: {
                  scrollable: false
                },
                items: [
                    {
                        docked: 'top',
                        xtype: 'toolbar',
                        layout: {
                            pack: 'center'
                        },
                        items: [
                            {
                                xtype      : 'searchfield',
                                placeHolder: 'Search',
                                name       : 'searchfield'
                            }
                        ]
                    }
                ]
            },

[davidchan]

I've updated the code to the below. Now the map is showing, but the map view is scrollable (when I drag the map, I see scrollbars). I've attempted to pass in a config: {scrollable: false }, but that didn't help.

items: [
    {
        docked: 'top',
        xtype: 'toolbar',
        title: 'Search',
        ui: 'light'
    },
    {
        title: 'Proximity',
        xtype: 'map',
        useCurrentLocation: true
    },
    {
        title: 'Quick',
        xtype: 'panel',
        config: {
            scrollable: false

[davidchan]

Ah, found it. It's actually inherited from Viewport. I have it set to defaults: { scrollable: true } before.

Now question is why doesn't it get overridden with explicit child configs? Anyone with some experience with Ext layout explain this?

For example, I have another view where I saw two scrollbars.