1

「カードレイアウト」パネルにイベントハンドラーを追加する作業をしています。

私が抱えている問題は、GoogleChromeコンソールで以下のエラーが発生することです。

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 Developer ToolでJSをデバッグすると、イベントハンドラーがナビゲート機能にアクセスできないという問題があります。これは、そこにあるとは思わないためです。コードをnavigate関数からイベントハンドラーに移動し、レイアウトと方向をパラメーターの期待から直接取得するように変更すると、ナビゲーションは正常に機能します。これは、私の問題がナビゲート関数の呼び出し方法にあり、そこで何か間違ったことをしていることを示しています。

私はEXTJSを初めて使用しますが、助けていただければ幸いです。

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 に答える