PDA

View Full Version : Modal mask not visible and hideOnMaskTap not working



rvelasquez
7 Apr 2012, 2:51 PM
Hi,

I'm trying to create a drop down modal menu but even though I set the modal and hideOnMaskTap properties I don't see a mask and I can't tap a mask to dismiss the menu. Here's the code I have for the view and controller:


Ext.define("senchatest.view.Main", {
extend: 'Ext.Container',
xtype: 'mainview',

config: {
layout: {
type: 'vbox',
align: 'center'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'Sencha Test',
items: [
{
id: 'menuButton',
align: 'right',
text: 'Menu'
}
]
},
{
xtype: 'container',
items: [
{
id: 'menu',
xtype: 'panel',
docked: 'right',
top: 0,
right: 0,
modal: true,
hideOnMaskTap: true,
hidden: true,
html: 'This is the menu',
}
]
}


]
}
});


Ext.define('senchatest.controller.Main', {
extend: 'Ext.app.Controller',


config: {
refs: {
main: 'mainview',
menuButton: 'button[id=menuButton]',
menu: 'panel[id=menu]'
},
control: {
menuButton: {
tap: 'toggleMenu'
}
}
},

toggleMenu: function() {
if(this.getMenu().isHidden() == true) {
this.getMenu().show();
} else {
this.getMenu().hide();
}

}
});

Any ideas?

Cheers,

Rom

mitchellsimoens
8 Apr 2012, 7:20 AM
Why do you create the panel as an item of a container to then show it as a floating panel?

rvelasquez
8 Apr 2012, 9:20 AM
Good question. It's because I don't know what I'm doing and I'm totally new to this framework and Javascript in general :">. I initially tried adding the panel directly to the Main view but then it places the top of the panel at the top of the screen (which covers the titlebar). Adding the panel to a container that's an item of the view makes the top of the panel line up with the bottom of the titlebar. I finally managed to get this to work by creating the menu at runtime like so in the main controller:



showMenu: function() {
var menu = Ext.create('senchatest.view.Menu');
menu.controller = this;
Ext.Viewport.add(menu);
}




Ext.define('senchatest.view.Menu', {
extend: 'Ext.Panel',
xtype: 'menu',


requires: ['senchatest.view.MenuList'],

config: {
id: 'menu',
docked: 'right',
top: 50,
right: 0,
modal: true,
hideOnMaskTap: true,
width: '80%',
items: [
{
xtype: 'menulist',
}
],
listeners: {
hide: function() {
this.destroy();
}
}
},


executeMenuAction: function(dataView, index, target, record, event, options) {
this.controller.executeMenuAction(dataView, index, target, record, event, options);
menu = this;
setTimeout(function(){menu.destroy();}, 50);
}


});


In the menu I had to set the top attribute to a fixed value so that I can get it to line up with the bottom of the titlebar. By the way that odd line where I say menu.controller = this, I do that because the menu needs to execute a function on the controller and I don't know how else to get a reference to it from inside the menu. I tried using the refs config but that didn't work. Any idea why that wouldn't work?

Basically I would like to have a menu accessed by a button on the titlebar. When the menu button is pressed the user will see a modal panel with a list of actions. When the user selects the action it will execute and the panel will dismiss. Right now the actions need to set the active item on a tab panel. The controller has all the refs setup to do this but it needs to be triggered when the user taps an item in the list. That's why the menu needs to know about the controller.

I tried using fireEvent and the bubbleEvent attribute but that didn't work. I'm guessing it won't work because the controller is not a parent of the menu.

Anyways if I'm doing something totally wrong feel free to let me know. By the way thanks Mitchell for responding to all these posts. You've been a great help.

Cheers,

Rom