Some missing useful config

[panhudie]

1. Ext.Button:
hidefocus
//when focus on a button, these is no ugly outline around the text on the button.

2. Ext.Toolbar.Spacer:
wide
//just sets how wide of the spacer.

3. Ext.tree.TreePanel:
unselectable
//makes the tree unselectable, so when you check a node, you can't select the text of the node by accident.

4. Ext.Toolbar:
insertButton
//supports insert Ext.form.Field object.

For 1:
I just override Ext.Button.onRender, added
<button class="x-btn-text" hidefocus="on" onfocus="this.blur() ...>

2:
override Ext.Toolbar.Spacer.render

3:
tree.getEl().unselectable()

4:
override Ext.Toolbar.insertButton, inserted this code to insertButton

if (item instanceof Ext.form.Field){
item.render(td);
item = new Ext.Toolbar.Item(td.firstChild);
}

[JeffHowden]

1. Ext.Button:
hidefocus
//when focus on a button, these is no ugly outline around the text on the button.

The outline is there as an accessibility aid. It's also a handy way for the user to know which of the buttons has focus.


For 1:
I just override Ext.Button.onRender, added
<button class="x-btn-text" hidefocus="on" onfocus="this.blur() ...>

You've now effectively made the button a little island in the ocean that can neither by traveled to or traveled from. Blurring onfocus is probably the last thing you ever want to do. Sure, it solves the "problem" of the focus rectangle, but are you aware of all the problems that causes?

[panhudie]

The outline is there as an accessibility aid. It's also a handy way for the user to know which of the buttons has focus.

I think the focus rectangle should make it be around the button, but not around the text of the button, so the accessibility aid rectangle still be there, and not make the button ugly.


You've now effectively made the button a little island in the ocean that can neither by traveled to or traveled from. Blurring onfocus is probably the last thing you ever want to do. Sure, it solves the "problem" of the focus rectangle, but are you aware of all the problems that causes?

Because firefox does not support hidefocas, after googling, I found the only way to hidefocas is blurring onfocus. And the blurring onfocus can be a config, you can turn it on and off.

[JeffHowden]

Again, never blur() when something receives focus. Doing so will do nothing but give you grief with features of Ext that rely on certain elements having focus. Do it if you like, but don't say you weren't warned.

You realize that the focus rectangle is an actual standard that's applied to more than just websites, right? Next time you see a window or dialog in Windows, try using your tab or arrow keys to move around from control to control and see what happens.

[panhudie]

Yes, blurring on focus is evil. But current extjs button have inconsistent behavior. say:

The Anchor Layout with Forms example:
ext-2.0-beta1/examples/form/anchoring.html

When check Send Button(or Cancel Button) above of the "send" text, now the button have the focus rectangle. But check the edge of button (not above the text "send"), the button will not have the focus rectangle(actually the button had been checked).

[JeffHowden]

I'm sorry, but I don't follow what the issue with that example is. If you're saying the focus rectangle doesn't show there, then yes, you are correct. It can't show until the button actually has focus which can only happen with nothing else has focus.