PDA

View Full Version : Ext.tree.Panel focus event - how's it triggered?



myExtJsUname
4 Mar 2013, 9:59 AM
I imagine this is a quick one and I'm just missing something here...

In the documentation for Ext.tree.Panel, I see "focus" and "blur" events, but can't figure out how they get triggered. For example, given the following code, how does an end user get the text provided in the focus handler to appear in the console?



var treeStore = Ext.create(
"Ext.data.TreeStore"
,{
root: {
expanded: true
,children: [
{
text: "homework"
,expanded: true
,checked: false
,children: [
{
text: "book report"
,leaf: true
,checked: false
}
,{
text: "alegrbra"
,leaf: true
,checked: false
}
]
}
]
}
}
);

var pnlTree = Ext.create(
"Ext.tree.Panel"
,{
store: treeStore
,rootVisible: false
,hideHeaders: true
,columns: [
{
xtype: 'treecolumn',
flex: 1,
dataIndex: 'text'
}
]
);
pnlTree.on("focus"
,function(){
console.log("Ext.tree.Panel focus");
}
,this);


I've tried mouse clicking on the tree itself but that doesn't seem to do anything.

Any suggestions?

Cheers,
jtm

mitchellsimoens
6 Mar 2013, 7:50 AM
The focus event is on all components and if you have the focus manager enabled. Are you sure you want focus? What are you attempting?

myExtJsUname
6 Mar 2013, 1:48 PM
mitchellsimoens

Thank you for your response to this and a previous, related thread.

I believe I want "focus" but am open to other suggestions. What I am trying to do is related to another thread I have started (http://www.sencha.com/forum/showthread.php?249591-Keyboard-Navigation-tab-bing-into-a-Grid-Panel) but haven't really been able to do much with the responses I have received, so I'm trying to come up with an approach that will enable me to do what I need.

In summary, I work for an organization that has legal obligations requiring us to follow certain portions of the Web Content Accessibility Guidelines (WCAG). My group is required to insert our small bit of functionality within a page template provided by that organization and ExtJs provides us (and only us, not the organization) with the GUI functionality we use in our web mapping applications. I am attaching a picture of an example web page in the hopes it will help to understand this. Our portion of the page is highlighted by the red rectangle, but you can see from the scroll bar at right in the image that there is a significant amount of page outside the ExtJs portion.

42231

In particular, I am trying to introduce the ability to tab through our portion of the page to support those users who do not use a mouse. Everywhere else in the template, tabindex attributes are used to move the user through the page from top to bottom, left to right. And, without my group doing anything with the ExtJs FocusManager, tab focus moves properly through our web mapping ExtJs portion of the page as you see it. For example, the following images are meant to illustrate that I can tab along through the toolbar items and focus moves along so that, when a toolbar button is highlighted, I can hit Enter and the handler is invoked to, in our case, open the appropriate window for that functionality.

42232


42233

With the window shown above opened, I am trying to figure out a way to tab into the TreePanel (or into a grid as discussed in that other post...they seem to be essentially the same). If I use the mouse and click within the tree, I can then use the arrow and enter keys to navigate and operate the tree, satisfying the WCAG requirements in this respect. The only step I'm missing is getting focus into the tree itself after the window has been opened so the TreePanel's KeyMap can be utilized. For all our windows, we have overridden the Ext.panel.Tools renderTpl and added a tabindex="0". Now, when any window is opened and we start tab-bing, we first move through the tools and then into the body of a panel (for those panels that have text fields or buttons, for example).

So, in playing around with possibilities and trying to move into the tree at this point:

1. I looked into introducing the ExtJs FocusManager, but unfortunately that seemed to take over focus management for the whole page and we could no longer properly tab through those portions of the page that are not coded by us. Perhaps I simply couldn't figure out some way to use it properly...? I saw the focusFrame property and tried to somehow limit it to only our <DIV> in the page, even though the comment suggested it only accepted true/false but couldn't get that going (not that I think it was supposed to). Even so, most of the keyboard support that we need is already there in the ExtJs portion of the page without us having to code much of anything. Introducing the FocusManager seemed to me that we would then have to code what was previously there for free, but really the fact that we lost the ability to tab through portions of the page that were outside the ExtJs part was the main stumbling block.

2. I also looked in to adding tabindex attributes to the tree's table. The only way I figured that I could do this was to add it to every row in the table in the TableChunker class but this introduced a problem where what had "focus" could get out of whack visually...meaning if I tabbed in to the table this way and then started using the arrow keys to move around in the tree, the highlighting provided by the TreePanel itself suggested focus was on one row, but hitting the enter key (for example) to toggle a checkbox would actually toggle the row that I had tabbed to not the currently highlighted one. I tried messing about with the Ext.view.Table's focusRow code but really just made more of mess so I backed out of all this eventually.

3. Now, I'm trying to figure out if I can somehow tab into the tree's table and, upon doing so, use the RowSelectionModel to select the first row in it and thereby gain access to the KeyMap functionality. That's why I was asking about the TreePanel's focus event. I've even tried changing the TableChunker's metaTableTpl to add tabindex="0" to allow me to trigger the TreePanel's focus event...of course I couldn't get it to work.

So, do I want "focus"??? I don't know... I just want to be able to tab into the tree panel so I can get access to the KeyMap defined for it and am trying anything I can think of that will enable that to happen.

Cheers,
jtm

myExtJsUname
19 Mar 2013, 12:01 PM
I've submitted a "solution" to the overall problem I was trying to address here in a related thread:

http://www.sencha.com/forum/showthread.php?249591-Keyboard-Navigation-tab-bing-into-a-Grid-Panel&p=949131&viewfull=1#post949131

zzzzzwzw
18 Feb 2014, 6:11 AM
The focus event is on all components and if you have the focus manager enabled. Are you sure you want focus? What are you attempting?
How to diable the focus event? Thanks!