1. #1
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default Adding extra behavior to a function

    Adding extra behavior to a function


    Hi all,
    I'm having a conceptual question on how to achieve the following:

    Let's imagine I have a Toolbar:
    Code:
    MyToolbar = Ext.extend(Ext.Toolbar, {
        initComponent : function() {
            this.items = this.getToolbarItems();
    
            MyToolbar.superclass.initComponent.call(this);
        },
    
        getToolbarItems: function () {
            return [{
                text: 'Original Button'
            }];
        }
    });
    But then I have another file that wants to augment this Toolbar adding an extra button. If I override the getToolbarItems then I lose the original item that was there:

    Code:
    Ext.override(MyToolbar,{
        getToolbarItems: function () {
            return [{
                text: 'Additional Button'
            }]
        }
    });
    This will result in having a toolbar just with "Additional Button" instead of the 2 buttons.

    I've read the following:

    http://edspencer.net/2009/07/extover...ng-ext-js.html

    But I don't really like the solution of closures because then I cannot incorporate the change inside of a component...

    Is this the only way to achieve what I want?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I think you want to extend and not override. If you override, then all future instances of MyToolbar will use the additional button not the original button. You can do something like this to use both buttons:

    Code:
    MyToolbar2 = Ext.extend(MyToolbar, {
        getToolbarItems : function() {
            var originalItems = MyToolbar2.superclass.getToolbarItems.call(this);
    
            return originalItems.concat([
                {
                    text : 'Additional Button'
                }
            ]);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Amsterdam, The Netherlands
    Posts
    245
    Vote Rating
    6
    Grolubao is on a distinguished road

      0  

    Default


    I understand Mitchell, but imagine this Toolbar is in a component and that component is part of another component and so on. Then I would need to extend the Toolbar, and extend the component that used it in the beginning, etc, etc which in my case (I want to implement sort of an OSGI) is a burden. Imagine the following:

    Panel (border layout)
    - North section contains a banner
    - Center section contains a Panel with a Toolbar with buttons

    Let's imagine another project I have just wants to add another button to that Toolbar. If I extend it then where the Panel adds the original toolbar I need to override that Panel to use the newly created Toolbar, alternatively I need also to extend the Panel that uses the original Toolbar, and so on, which is a burden...

    That's why override is kinda what I want, I just cannot figure out a way to do it so in a modular way.

    Any ideas on this?

    P.S - Did I explain it properly?

    Quote Originally Posted by mitchellsimoens View Post
    I think you want to extend and not override. If you override, then all future instances of MyToolbar will use the additional button not the original button. You can do something like this to use both buttons:

    Code:
    MyToolbar2 = Ext.extend(MyToolbar, {
        getToolbarItems : function() {
            var originalItems = MyToolbar2.superclass.getToolbarItems.call(this);
    
            return originalItems.concat([
                {
                    text : 'Additional Button'
                }
            ]);
        }
    });

Thread Participants: 1