PDA

View Full Version : Prevent Ext JS Buttons from stealing focus



castitas
24 May 2012, 3:00 PM
I came across Jay Garcia's tip on the topic, (http://moduscreate.com/quicktip-prevent-ext-js-buttons-from-stealing-focus/) but it's not working in Ext 4.1. I've been trying to dig into the code, but I'm finding it confusing. Any thoughts?
You won't see the error (this.getClickEl is not a function) unless you put it in a file.


var win = new Ext.Window({
height : 200,
width : 300,
layout : 'fit',
items : {
xtype : "textarea",
value : 'Click here, then click a button!'
},
buttons : [
{
text : 'Steals focus!'
},
{
text : 'Does not steal focus!',
// @override
onMouseDown : function(e){
console.log("down ",this)
if(!this.disabled && e.button === 0){
console.log("in")
e.stopEvent(); // injected line here
this.getClickEl(e).addClass('x-btn-click');
this.doc.on('mouseup', this.onMouseUp, this);
}
},
// @override
onMouseUp : function(e){
console.log("up ",this)
if(e.button === 0){
console.log("in")
e.stopEvent(); // injected line here
this.getClickEl(e, true).removeClass('x-btn-click');
this.doc.un('mouseup', this.onMouseUp, this);
}
}
}
]
});
win.show();

win.items.items[0].el.focus()

vietits
24 May 2012, 5:40 PM
That code is for Ext 3. Below is the equivalent code for Ext 4.1.


Ext.onReady(function(){
var win = new Ext.Window({
height : 200,
width : 300,
layout : 'fit',
items : {
xtype : "textarea",
value : 'Click here, then click a button!'
},
buttons : [
{
text : 'Steals focus!'
},
{
text : 'Does not steal focus!',
// @override
onMouseDown : function(e){
console.log("down ",this)
var me = this;
if (!me.disabled && e.button === 0) {
e.stopEvent(); // injected line here
me.addClsWithUI(me.pressedCls);
me.doc.on('mouseup', me.onMouseUp, me);
}
},
// @override
onMouseUp : function(e){
console.log("up ",this)
var me = this;
if (e.button === 0) {
e.stopEvent(); // injected line here
if (!me.pressed) {
me.removeClsWithUI(me.pressedCls);
}
me.doc.un('mouseup', me.onMouseUp, me);
}
}
}
]
});
win.show();


win.items.items[0].el.focus();
});

castitas
25 May 2012, 6:42 AM
Thanks! I never would have figured it out. For some reason, though, it's kind of hit and miss. The buttons I have are ones I added to a row editor. Any idea?

castitas
25 May 2012, 1:15 PM
The behavior isn't very consistent. The spinner always loses focus, but besides that the only thing I can be sure of is that it if it doesn't work the first time, it won't work after.