PR3 - Problem with overlapping toolbar content

[parky128]

Hi, I have come across an issue where I am displaying a formPanel on top of a tabPanel, both of which have docked top toolbars, yet both toolbars are being displayed at the same time.

See the screenshots attached, the User Preferences panel appears when clicking the top right settings button from the main tabPanel view.

Code for both views below:

Ext.define('PinpointersTouch.view.MainView', {
    extend: 'Ext.TabPanel',
    xtype: 'mainview',
    requires: [
        'PinpointersTouch.view.UnitList',
        'PinpointersTouch.view.GMap',
		'PinpointersTouch.view.PreferencesView'
    ],
    config: {
        fullscreen: true,
         tabBar     : {
            docked : 'bottom',
            layout : {
                pack : 'center'
            }
        },
		items: [
			{
				title: 'Home',
				iconCls: 'home',
				html: [
					'<h1>Welcome to Pinpointers Touch</h1>'
				].join("")
			}, {
				xtype: 'unitslist',
				title: 'Locations',
				iconCls: 'locate',
				


			}, {
				xtype: 'gmap',
				title: 'Map',
				iconCls: 'maps',
				


			},{
			    xtype: 'toolbar',
                docked: 'top',
                ui: 'light',
                defaults: {
                    iconMask: true
                },
                items: [
                    { xtype: 'spacer' },
                    { iconCls: 'refresh', itemId: 'btnRefresh' },
                    { iconCls: 'user', itemId: 'btnUserLogout' },
                    { iconCls: 'settings', itemId: 'btnUserPrefs' }
                ]
			}
		]
    }
});

Ext.define('PinpointersTouch.view.PreferencesView', {
    extend: 'Ext.form.Panel',
    xtype: 'prefsview',
	config: {
		fullscreen:true,
        items: [
			{
				xtype : 'toolbar',
				docked: 'top',
				title: 'User Preferences'
			},
			{
				xtype: 'checkboxfield',
				name : 'showunitlabels',
				label: 'Show Unit Labels'
			},
			{
				xtype: 'selectfield',
				label: 'Auto Update Interval',
				options:[
						{text: '1 Minute',  value: 60},
						{text: '3 Minutes', value: 120},
						{text: '5 Minutes',  value: 300},
						{text: '10 Minutes',  value: 600}
					]
			},
			{
				xtype : 'toolbar',
				docked: 'bottom',
				layout : {
					pack : 'right'
				},
				items: [
					{
						xtype : 'button',							
						text: 'Done',
						itemId: 'btnDone'
					},
					{
						xtype : 'button',							
						text: 'Cancel',
						itemId: 'btnCancel'
						
					}						
				]
			}
		]
    }
});

I just a have listener in a controller which is showing my PreferencesView:

this.control({
            'button': {
                tap: function(btn) {
					
					if(btn._itemId=='btnUserPrefs') {
						if(this.application.userPrefsPanel==null) {
							this.application.userPrefsPanel =  Ext.create('PinpointersTouch.view.PreferencesView',{
							});
						}
						this.application.userPrefsPanel.show();
						
					}


                }
            }
        });

So as you can see, I end up with overlapping content on both toolbars, is this a bug?

[mitchellsimoens]

So the toolbars are on top of each other or stacked?

[mitchellsimoens]

This is test on PR3 was stacked as expected:

        var panel = Ext.create('Ext.tab.Panel', {
            fullscreen : true,
            items      : [
                {
                    xtype  : 'toolbar',
                    title  : 'Tab Panel',
                    docked : 'bottom'
                },
                {
                    title : 'One',
                    items : [
                        {
                            xtype  : 'toolbar',
                            title  : 'Card',
                            docked : 'bottom'
                        }
                    ]
                }
            ]
        });

[parky128]

For me the toolbars appear on top of one another, not stacked. I was meant to attach screenshots so you could see but Im sure you know what I mean. I end up with the title of one of the toolbars appearing across the buttons of the other.

[mitchellsimoens]

Attached is the screen shot I have using PR3. This is what I would expect to happen and what I meant by stacked

Screen Shot 2011-12-16 at 11.12.52 AM.jpg

[parky128]

Hi, here are the image I should have attached when I first began this thread, you can see that when I show a Form Panel on top of my main Tab Panel view, the top toolbars on each display at the same time, looks ugly! Am I doing something incorrect here?