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 Unanswered: 4.1.1 to 4.2.0 - renderTpl override breaks code, need better approach

    Unanswered: 4.1.1 to 4.2.0 - renderTpl override breaks code, need better approach


    In attempting to upgrade from 4.1.1, an approach we have used in the past has broken our application in 4.2.0 so I am writing to ask what the correct way to do something is...

    For example, in our application, users need to be able to use the keyboard to navigate to all the Tools in a Panel using the TAB key. In the past, we simply overrode the renderTpl for Ext.panel.Tool to give it the following value:
    Code:
    renderTpl: [
                '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation"', ///>'
                // This next line is for our application:
                ' tabindex="0"',
                ' />'
            ]
    However, in doing the upgrade, the renderTpl for Ext.panel.Tool has changed slightly so now our override breaks the code.

    This is just a very simple example of the type of thing we have done in overriding templates for various classes. We will now have to revisit each individually to upgrade the definitions and re-integrate our changes. Obviously, this isn't something we'll want to do each time we upgrade.

    What would be a better approach for doing this sort of thing? Like I said, we are obviously trying to introduce definition changes that we want to perpetrate throughout the entire application and don't want to have to depend on individual developers of, say any given panel, to be sure they define something a certain way to get what we are looking for.

    Can anyone provide any direction in this regard?

    Appreciated,
    jtm

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,369
    Answers
    433
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    When you author your overrides are you creating them in your own namespace using the following syntax?

    Code:
    Ext.define('My.app.PanelPart2', {
        override: 'My.app.Panel',
    
    
        constructor: function (config) {
            this.callParent(arguments); // calls My.app.Panel's constructor
            //...
        }
    });

  3. #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


    slemmon,
    Thank you for your response. In re: using the syntax suggested...

    Sort of, but not completely. Given my previous example, since we're only overriding the renderTpl declaration, we don't include the constructor. As for the namespace, all of our overrides are put in an override directory within our source structure and the class hierarchy maintained from ExtJs so it's easy for us to see what's been overridden and where to find the class being overridden should that be necessary.

    Perhaps it's easier to show you how our override Tool class was defined:
    Code:
    Ext.define(
        "Ext.override.panel.Tool"
        ,{
            override: "Ext.panel.Tool"
            ,renderTpl: [
                '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-{type}" role="presentation" ', 
                // This next line is for our application:
                'tabindex="0" ',
                '/>'
            ]
        }
    );
    However, because of the changes to the class attribute in the renderTpl for 4.2.0, the tools' images were no longer appearing in the panels. Once I updated the code so the beginning of renderTpl was as it is in 4.2.0, everything worked fine again.

    Code:
    renderTpl: [
        '<img id="{id}-toolEl" src="{blank}" class="{baseCls}-img {baseCls}-{type} {childElCls}" role="presentation" ',
        // This next line is for our application:
        'tabindex="0" ',
        '/>'
    ]
    The problem, though, is that this is the simplest example of this type of thing. Others are more complicated, for example, the labelableRenderTpl in Ext.form.Base which has also changed.

    Now, if there really is no other way for us to get around this but to go through each one when we upgrade, so be it. But, I thought I would take a moment to ask if there was a better way for us to be doing this sort of thing so that we wouldn't have to keep checking these every time.

    Cheers,
    jtm

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,369
    Answers
    433
    Vote Rating
    200
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Hmm... first thing that comes to mind is to perhaps in your override use the set() method on the tool element to add the tabindex. You could set the attribute in the afterRender method for the tool.
    http://docs.sencha.com/extjs/4.2.0/#...ent-method-set

    Manipulating the tpl of the components from the framework is likely a risky practice as the components' markup does change between versions frequently enough that I wouldn't count on its structure.

Thread Participants: 1