如何在extjs 3.4面板项中添加函数处理程序

时间:2014-01-28 11:36:59

标签: javascript extjs

。当我运行并单击图标按钮然后它无法调用函数func_1();什么都没有出现。在屏幕上

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();
            }
        }]
    });
});
你可以告诉我如何调用func_1();或面板项中的处理程序?

2 个答案:

答案 0 :(得分:0)

无需从匿名函数中调用该函数,您可以直接从处理程序引用它。

例如:

    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(){

}

答案 1 :(得分:0)

您应该创建一个全局变量,然后您可以在此处理器中查看范围:

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();
        }
    }]
});