ExtJS arrowHandler needs to reference the splitbutton it is part of

Question

In the following code, the Ext.getCmp's do not work, because they aren't completely defined when they're being called. How can I grab those two things?

Also, there is another part of code continually pushing to list.menu.buttons, so that's why I need them added to items only when the arrow is clicked.

xtype: "splitbutton",
id: "list",
enableToggle: true,
arrowHandler: (function () {
                var library = Ext.getCmp("library");
                var buttons = Ext.getCmp("list").menu.buttons;
            function btn(num) {
                var image = new Image;
                image.src = buttons[num].dataURL;
                this.xtype = "button";
                this.height = 50;
                this.width = 50;
                this.icon = image;
                this.num = num;
                this.handler = function (btn) {
                    btn.up("button").fireEvent("selected", this.num);
                };
            }
            for (var i = 1; i <= 1; i++)
                library.push(new btn(i));
        })(),
menu: {
    plain: true,
    buttons: [],                            
    items: [
        {
            xtype: "ribbon_gallery",
            columns: 3,
            title: "Recent",
            id: "recent",
            items: []
        },
        {
            xtype: "ribbon_gallery",
            columns: 3,
            title: "Library",
            id: "library",
            itemId: "library",
            items: []
        }
    ]
}

Answer 1

The problem is that you have specified a self-invoked function to the arrowHandler config

  arrowHandler: (function() {...})()

You need a "normal" function

  arrowHandler: function() {...}