Adding extra behavior to a function

[Grolubao]

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

Let's imagine I have a Toolbar:

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:

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?

[mitchellsimoens]

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:

MyToolbar2 = Ext.extend(MyToolbar, {
    getToolbarItems : function() {
        var originalItems = MyToolbar2.superclass.getToolbarItems.call(this);

        return originalItems.concat([
            {
                text : 'Additional Button'
            }
        ]);
    }
});

[Grolubao]

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?

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:

MyToolbar2 = Ext.extend(MyToolbar, {
    getToolbarItems : function() {
        var originalItems = MyToolbar2.superclass.getToolbarItems.call(this);

        return originalItems.concat([
            {
                text : 'Additional Button'
            }
        ]);
    }
});