how to add function handler in extjs 3.4 panel items

Question

. when i run and click on Icon button then it is not able to call function func_1(); nothing is appear. on the screen

Ext.onReady(function () {
    function func_1() {
        //some functionality
    }

    new_win = new Ext.Panel({
        renderTo: Ext.getBody(),
        activeItem: 0,
        tbar: {
            items: [{
                text: 'List',
                ref: '../prevButton',
                disabled: true,
                handler: function () {
                    new_win.getLayout().setActiveItem(0);
                    new_win.prevButton.disable();
                    new_win.nextButton.enable();
                }

            }, '-', {
                text: 'Icon',
                ref: '../nextButton',
                handler: function () {
                    new_win.getLayout().setActiveItem(1);
                    new_win.prevButton.enable();
                    new_win.nextButton.disable();
                }
            }]
        },
        items: [{
            html: 'hello'
        }, {
            handler: function () {
                func_1();
            }
        }]
    });
});

can you please tell me how to call func_1(); or handler in panel items ?

Answer 1

There is no need to call the function from within anonymous function you can refer to it directly from the handler.

for example:

    tbar: {
                    items: {
                        xtype: 'toolbar',
                        style: 'border:0;',
                        items: [{
                            xtype: 'buttongroup',
                                items: [{
                                    id: 'btnAddItem',
                                    text: 'Add Item',
                                    icon: 'images/icons/add-icon.png',
                                    handler: add_item
                                }]
                            }]
                        }
                },
...
function add_item(){

}

Answer 2

You should create a global variable and then you can see the scope within the handler like this:

Ext.onReady(function () {

var me = this;

function func_1() {
    //some functionality
}

new_win = new Ext.Panel({
    renderTo: Ext.getBody(),
    activeItem: 0,
    tbar: {
        items: [{
            text: 'List',
            ref: '../prevButton',
            disabled: true,
            handler: function () {
                new_win.getLayout().setActiveItem(0);
                new_win.prevButton.disable();
                new_win.nextButton.enable();
            }

        }, '-', {
            text: 'Icon',
            ref: '../nextButton',
            handler: function () {
                me.func_1();
                new_win.getLayout().setActiveItem(1);
                new_win.prevButton.enable();
                new_win.nextButton.disable();
            }
        }]
    },
    items: [{
        html: 'hello'
    }, {
        handler: function () {
            func_1();
        }
    }]
});