1

我正在向“卡片布局”面板添加事件处理程序。

我遇到的问题是我在 Google Chrome 控制台中收到以下错误。

Uncaught ReferenceError: navigate is not defined

这是我的 EXTJS 代码文件：

Ext.define('COMP.app.DailyBulletin', {
extend: 'Ext.panel.Panel',
alias: 'widget.dailybulletin',
height: 300,
width: 200,
layout: 'card',
bodyStyle: 'padding:15px',
activeItem: 0, // index or id
bbar: ['->', {
    id: 'card-prev',
    text: '« Previous',
    handler: function(btn){
        navigate(btn.up("panel"), "prev");
    },
    disabled: true
},{
    id: 'card-next',
    text: 'Next »',
    handler: function(btn){
        navigate(btn.up("panel"), "next");
    },
}],
items: [{
    id: 'card-0',
    html: 'page 0'
},{
    id: 'card-1',
    html: 'page 1'
}],

    navigate: function(panel, direction){
        var layout = panel.getLayout();
        layout[direction]();
        Ext.getCmp('card-prev').setDisabled(!layout.getPrev());
        Ext.getCmp('card-next').setDisabled(!layout.getNext());
},
});

当我在 Google Chrome 开发人员工具中调试 JS 时，我可以看到问题是事件处理程序无法访问导航功能，因为它认为它不存在。如果我只是将代码从导航函数移动到事件处理程序中，并将布局和方向从预期参数更改为直接获取它们，导航就可以正常工作。这告诉我我的问题在于我如何调用导航功能并且我在那里做错了什么。

我是 EXT JS 的新手，非常感谢任何帮助，谢谢！

4

1 回答 1

0

尝试这样的事情：

Ext.define('COMP.app.DailyBulletin', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dailybulletin',
    height: 300,
    width: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    activeItem: 0, // index or id

    items: [{
        id: 'card-0',
        html: 'page 0'
    }, {
        id: 'card-1',
        html: 'page 1'
    }],

    initComponent: function() {
        Ext.apply(this, {
            bbar: ['->', {
                id: 'card-prev',
                text: '« Previous',
                scope: this,
                handler: function(btn) {
                    this.navigate(btn.up("panel"), "prev");
                },
                disabled: true
            }, {
                id: 'card-next',
                text: 'Next »',
                handler: function(btn) {
                    scope: this,
                    this.navigate(btn.up("panel"), "next");
                },
            }]
        });
        this.callParent();
    },

    navigate: function(panel, direction) {
        var layout = panel.getLayout();
        layout[direction]();
        Ext.getCmp('card-prev').setDisabled(!layout.getPrev());
        Ext.getCmp('card-next').setDisabled(!layout.getNext());
    },
});
于 2012-05-24T02:09:40.877 回答