PDA

View Full Version : [3.1.1]How to get rid of ugly dotted lines around buttons



Stju
1 Mar 2010, 5:51 AM
Hi!
Just wanted to share some override, that helps to get rid of those ugly dotted lines after button is pressed.. Maybe there is some other easier and nicer way.. :">


Ext.override(Ext.Button, {
onRender : function(ct, position){
if(!this.template){
if(!Ext.Button.buttonTemplate){
Ext.Button.buttonTemplate = new Ext.Template(
'<table id="{4}" cellspacing="0" class="x-btn {3}"><tbody class="{1}">',
'<tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr>',
'<tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="{2}" unselectable="on"><button onfocus="blur()" type="{0}"></button></em></td><td class="x-btn-mr"><i> </i></td></tr>',
'<tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr>',
'</tbody></table>');
Ext.Button.buttonTemplate.compile();
}
this.template = Ext.Button.buttonTemplate;
}
var btn, targs = this.getTemplateArgs();
if(position){
btn = this.template.insertBefore(position, targs, true);
}else{
btn = this.template.append(ct, targs, true);
}
this.btnEl = btn.child(this.buttonSelector);
this.mon(this.btnEl, {
scope: this,
focus: this.onFocus,
blur: this.onBlur
});
this.initButtonEl(btn, this.btnEl);
Ext.ButtonToggleMgr.register(this);
}
});
Changes highlighted in red.
Any better solution is welcome.
Have a nice day!
Stju

Animal
1 Mar 2010, 7:07 AM
So if you are not using a mouse, but instead using keyboard access, or some other form of accessibility, you cannot operate your app?

Focus exists for a reason.

Stju
2 Mar 2010, 2:34 PM
It's just for an option. I strongly doubt if someone will use complicated web applications without a mouse... At least I don't know anyone! In case of touchpad, for example, I still can fully use the app. Anyway it's not about usability, but UGLY DOTTED LINES :s