1. #1
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default Answered: Adding tabindex to HTML for Ext.panel.Tool?

    Answered: Adding tabindex to HTML for Ext.panel.Tool?


    Before anyone asks why I am trying to do this ... All Canadian federal government web sites are required to provide keyboard access (among many other things) to all of its web pages. (See http://en.wikipedia.org/wiki/Web_Con...ity_Guidelines "The landmark 2010/2012 Jodhan decision has caused the Canadian Federal government to require all online web pages, documents and videos available externally and internally to meet the accessibility requirements of WCAG 2.0.").

    In ExtJs 2.2, I could easily add a tabindex='0' to the tools in a Panel by overriding Ext.Panel's addTool method and just changing the Ext.Template from:
    Code:
    '<div class="x-tool x-tool-{id}"> </div>'
    to:
    Code:
    '<div class="x-tool x-tool-{id}" tabindex="0"> </div>'
    Now, we're upgrading to 4.1 and I'm trying to figure out how to do the same thing again.

    I found the "template" for tools in Ext.panel.Tool where the renderTpl is defined as '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"/>' ...obviously things have changed and that's not the right place to do this anymore. So, I started trying to trace through the config and render processes to figure out where the appropriate spot would be for me to set the tabindex='0' for all panel tools in my application.

    I got as far as Ext.util.Renderable's getElConfig where it calls initStyles on me.protoEl and then writes the content of me.protoEl to a config array. As far as I can tell, tabindex has to be in that associative array for the tool's <div> to get it in the HTML when the Ext.DomHelper.generateMarkup is called for that "spec" (the parameter name it's passed in).

    Now, I can see that the protoEl is created in the AbstractComponent but can't see where/when I'm supposed to get a tabindex value into it. Just on the off chance it might help identify the right place to do this, I actually tried setting 'tabindex: 0' directly in the Ext.panel.Tool definition but it just gets ignored (as I expected it would) and isn't carried through to the config array noted above.

    So, now I'm stumped, can anyone suggest an idea how I might associate a tabindex='0' with the HTML markup for all the panel tools in my application? If I can't come up with anything, I'll have to remove all the panel tools and add buttons for that functionality directly onto the panels themselves. I'd prefer not to do that, as the tools are much slicker, but we really have no choice in the matter if we can't "tab" our way to them.

    Any help or clues are appreciated...

    Cheers,
    jtm

  2. I'm sorry to bother everyone with these posts (especially as I may have solved my own problem) but hopefully the thread will prove useful to someone else needing to do same thing to support WCAG requirements.

    The following code seems to do everything I need:
    1. It allows the user to use the keyboard to tab to the tools in any panel
    2. It changes the tools' display to indicate which currently has focus
    3. It invokes the onClick function when the user presses the ENTER key while a tool is "active"

    Does anyone see any problem with this? Is this how I'm supposed to do this kind of thing in ExtJs 4.1.1?

    cheers,
    jtm

    Note added later: Apparently, I was close but had missed a vital piece of information in all this that you can find in another thread (http://www.sencha.com/forum/showthre...ng-ExtJs-class). Of particular importance
    The class name should not match the override name. It's important to realise that this does not create a new class, it changes Ext.panel.Tool directly.
    . I've updated my example below accordingly.

    Note added even later: Oops. I just realized I updated my example wrong (this is so embarrassing). I've done so again. Sorry for any confusion...

    Code:
    Ext.define(
        "Ext.override.panel.Tool"
        ,{
            override: "Ext.panel.Tool"
            ,renderTpl: [
                '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" tabindex="0" />'
            ]
            ,initComponent: function(){
                var me = this;
    
                me.callParent();
    
                me.on(
                    {
                        element: "toolEl"
                        ,focus: me.onFocus
                        ,blur: me.onBlur
                        ,scope: me
                    }
                );
            }
    
            ,afterRender: function(){
                var me = this;
                me.callParent();
    
                this.getEl().addListener(
                    "keyup"
                    ,function(evt, target, eOpts){
                        if (evt.keyCode == evt.ENTER){
                            this.onClick(evt, target);
                        }
                    }
                    ,me
                );
            }
    
            ,onFocus: function(evt){
                this.onMouseOver();
            }
            ,onBlur: function(evt){
                this.onMouseOut();
            }
        }
    );

  3. #2
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default


    Okay, I'm an !! The simplest thing just jumped out an slapped me.

    In 2.2, the tabindex='0' was associated with the tool's div; so I was thinking I needed to do the same in 4.1. I needed to associate the tabindex with the div. But then I thought, "No, I don't". I can add the tabindex='0' to the renderTpl I noted previously:
    Code:
    &lt;img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" <strong>tabindex="0"</strong> /&gt;
    and users can then tab to the tools in a panel.

    I realize there are other issues with this which might require input later (e.g., I still need to add keyboard event listeners to the tools and I need to display focus in some way on the tool when the user tabs to it), but for now this particular problem of being able to tab to the tools is fixable. I'll start dealing with those once I get this one fully dealt with.

    Now, can anyone indicate how I can override that Ext.panel.Tool's renderTpl so it is applied to the entire app? Ext.override is deprecated I see... I'll keep looking to figure that one out but if someone knows something off the top of their head, I'd appreciate hearing about it.

    Cheers,
    jtm

  4. #3
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default Adding tabindex to HTML for Ext.panel.Tool? Overriding/Extending prototype?

    Adding tabindex to HTML for Ext.panel.Tool? Overriding/Extending prototype?


    So, I want to change the Ext.panel.Tool's renderTpl for all tools in my application and, as I said previously, in ExtJs 2.2, I would have done this with Ext.override but that appears to be deprecated in ExtJs 4.

    I can, after ExtJs has loaded, do something like the following and it will work, but I can't imagine that's the way the creators of ExtJs want me to be doing something like this.
    Code:
    Ext.panel.Tool.prototype.renderTpl = [
        '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" tabindex="0" />'
    ];
    So, what is the correct approach now for doing something like this? I do not want to define a new "MyTool" that extends "Ext.panel.Tool" because then I'd also have to define a new Panel that uses my "MyTool" rather than "Ext.panel.Tool", etc. That's way too complicated but seems to be what the docs are recommending. Instead, I want to change the definition of "Ext.panel.Tool". And, I'd like to do it "properly"; that is, as I am expected to, not just in a way that happens to work.

    I particularly see a problem with trying to do this when I need to extend the class to listen for "focus" and "blur" and then to somehow add a key listener (which doesn't appear to be a valid event at this point), so any hints on that score would be appreciated also.

    I'll keep mucking about...

    Cheers,
    jtm

  5. #4
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      0  

    Default


    I am surprised to find that overriding the definition for renderTpl in Ext.panel.Tool appears to be as simple as this:
    Code:
    Ext.define(
        "Ext.panel.Tool"
        ,{
            override: "Ext.panel.Tool"
            ,renderTpl: [
                '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" tabindex="0" />'
            ]
        }
    );
    All of the examples I came across made the definition with a name that was not the same as the class being overridden, so I didn't think this would work. However, as I got desperate I decided to give it a try anyway...et voila!

    I'd be very happy if someone could tell me if that is the correct way to do this or am I just getting lucky here somehow?

    Cheers,
    jtm

  6. #5
    Sencha User
    Join Date
    Jan 2009
    Location
    Ottawa, ON, Canada
    Posts
    81
    Answers
    6
    Vote Rating
    1
    myExtJsUname is on a distinguished road

      1  

    Default


    I'm sorry to bother everyone with these posts (especially as I may have solved my own problem) but hopefully the thread will prove useful to someone else needing to do same thing to support WCAG requirements.

    The following code seems to do everything I need:
    1. It allows the user to use the keyboard to tab to the tools in any panel
    2. It changes the tools' display to indicate which currently has focus
    3. It invokes the onClick function when the user presses the ENTER key while a tool is "active"

    Does anyone see any problem with this? Is this how I'm supposed to do this kind of thing in ExtJs 4.1.1?

    cheers,
    jtm

    Note added later: Apparently, I was close but had missed a vital piece of information in all this that you can find in another thread (http://www.sencha.com/forum/showthre...ng-ExtJs-class). Of particular importance
    The class name should not match the override name. It's important to realise that this does not create a new class, it changes Ext.panel.Tool directly.
    . I've updated my example below accordingly.

    Note added even later: Oops. I just realized I updated my example wrong (this is so embarrassing). I've done so again. Sorry for any confusion...

    Code:
    Ext.define(
        "Ext.override.panel.Tool"
        ,{
            override: "Ext.panel.Tool"
            ,renderTpl: [
                '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" tabindex="0" />'
            ]
            ,initComponent: function(){
                var me = this;
    
                me.callParent();
    
                me.on(
                    {
                        element: "toolEl"
                        ,focus: me.onFocus
                        ,blur: me.onBlur
                        ,scope: me
                    }
                );
            }
    
            ,afterRender: function(){
                var me = this;
                me.callParent();
    
                this.getEl().addListener(
                    "keyup"
                    ,function(evt, target, eOpts){
                        if (evt.keyCode == evt.ENTER){
                            this.onClick(evt, target);
                        }
                    }
                    ,me
                );
            }
    
            ,onFocus: function(evt){
                this.onMouseOver();
            }
            ,onBlur: function(evt){
                this.onMouseOut();
            }
        }
    );
    Last edited by myExtJsUname; 20 Nov 2012 at 11:49 AM. Reason: correct sample code

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."