PDA

View Full Version : modal Ext.Window - refocus Window if mask is clicked


mystix
6 Nov 2008, 11:18 PM
a tiny enhancement to modal Ext.Windows:


Ext.override(Ext.Window, {
// private
onRender: Ext.Window.prototype.onRender.createSequence(function() {
if (this.modal) {
this.mask.on('click', this.focusEl.focus, this.focusEl);
}
})
});

simply focus the modal Window's focusEl if its mask is clicked.

[edit]
note: Safari doesn't seem to allow anchor tags to be focused...
mystix
13 Nov 2008, 5:54 PM
just noticed this made it into Window.js (now we're one step closer to true modality. woot.)

saw this in svn rev 2738


// private
onRender : function(ct, position){
Ext.Window.superclass.onRender.call(this, ct, position);

if(this.plain){
this.el.addClass('x-window-plain');
}

// this element allows the Window to be focused for keyboard events
this.focusEl = this.el.createChild({
tag: "a", href:"#", cls:"x-dlg-focus",
tabIndex:"-1", html: "*"});
this.focusEl.swallowEvent('click', true);

this.proxy = this.el.createProxy("x-window-proxy");
this.proxy.enableDisplayMode('block');

if(this.modal){
this.mask = this.container.createChild({cls:"ext-el-mask"}, this.el.dom);
this.mask.enableDisplayMode("block");
this.mask.hide();
if(this.modal) {
this.mask.on('click', this.focus, this);
}
}
},

but that redundant check there could be removed ;)
jack.slocum
14 Nov 2008, 7:46 AM
Thanks, will be changed with next check in.
mystix
14 Nov 2008, 8:13 AM
one thing i noticed in my test environments though -- that call didn't seem to have any effect in both Safari Win & Mac.
seems like Safari doesn't allow dimensionless anchor tags to be focused.
mystix
16 Nov 2008, 8:25 PM
one thing i noticed in my test environments though -- that call didn't seem to have any effect in both Safari Win & Mac.
seems like Safari doesn't allow dimensionless anchor tags to be focused.
confirmed this behaviour -- Safari cannot focus anchor tags with zero width / height.

here's a simple test case:


<html>
<head>
<title>focusEl test</title>

<script>
Ext.onReady(function() {
Ext.get('test').focus().on('click', function(e) {
Ext.Msg.alert('Successfully focused focusEl', 'Woohoo!');
});
});
</script>

</head>
<body scroll="no"><!-- scroll="no" to remove IE's irritating scrollbar -->
<a href="#" id="test" class="x-dlg-focus"></a>
</body>
</html>

pressing enter after the page has loaded will display an alert in FF, but not in Safari.


the fix is trivial -- simply give the x-dlg-focus class a 1px width and height:


<style>
.x-dlg-focus{-moz-outline:0 none;outline:0 none;width:1px;;height:1px;overflow:hidden;position:absolute;top:0;left:0;}
</style>

both x-menu-focus and x-slider-focus already have this rule in place.