PDA

View Full Version : Full screen panel not masking correctly?



parky128
6 Jan 2012, 2:04 AM
Hi,

I got an issue where I am trying to display a full screen panel on top of a Tab Panel. The Tab Panel has a top and bottom toolbar, but when I got to show the additional panel on top content from the Tab Panel behind is still visible on this panel.

My code for the User Preferences view is below:


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 have button tap listener configured on the Select Criteria button to show the panel like so:


'historyview #btnSelectCriteria' : {
tap: function() {

if(this.application.userPrefsPanel==null) {
this.application.userPrefsPanel = Ext.create('PinpointersTouch.view.PreferencesView',{
});
}

this.application.userPrefsPanel.show();
}


}



So here is how my main Tab Panel appears:
30504

This is what happens when showing the panel on top:

30503

See how the buttons from Tab Panel are showing through onto this new panel (circled in red).

Where am I going wrong here please?

mitchellsimoens
6 Jan 2012, 7:56 AM
When you set a component to have fullscreen to true, when you use Ext.create (or new) it will add that item as a child of Ext.Viewport but it is hidden as it's not the active item. Ext.Viewport is a global container that uses card layout. So when you use show(), you are just making the component go from hidden to shown. You should use Ext.Viewport.setActiveItem instead of show:


Ext.create('Ext.tab.Panel', {
fullscreen : true,
items : [
{
title : 'Test',
html : 'Hi',
items : [
{
xtype : 'toolbar',
docked : 'bottom',
title : 'Tab Panel',
items : [
{
text : 'Test',
handler : function() {
var panel = Ext.create('Ext.Panel', {
fullscreen : true,
html : 'Test'
});
Ext.Viewport.setActiveItem(panel);
}
}
]
}
]
}
]
});