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

【问题标题】：how to add function handler in extjs 3.4 panel items如何在 extjs 3.4 面板项中添加函数处理程序
【发布时间】：2014-01-28 23:26:00
【问题描述】：

。当我运行并单击图标按钮时，它无法调用函数 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();还是面板项中的处理程序？

【问题讨论】：

标签： javascript extjs

【解决方案1】：

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

例如：

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

}

【讨论】：

【解决方案2】：

您应该创建一个全局变量，然后您可以在处理程序中看到如下所示的范围：

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

【讨论】：