如何在 Ext JS 的日历组件中添加监听器？

Question

如何添加侦听器以捕获日历组件中事件的一些变化Ext.calendar.panel.Panel？在 this post 之后，我尝试了所有列出的事件，但其中 none 有效。

Answer 1

您可以在 Ext.calendar.store.Events.html events 上收听。类似于：

Ext.define('CalApp.view.main.Main', {
    extend: 'Ext.calendar.panel.Panel',

    createButton: {
        hidden: true
    },

    defaultView: 'week',

    store: {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'calendars.json'
        },
        eventStoreDefaults: {
            proxy: {
                type: 'ajax',
                url: 'events.json'
            },
            listeners: {
                // Listen add event
                add: function(store, addedEventRecords) {
                    Ext.Array.each(addedEventRecords, function(eventRecord) {
                        console.log(eventRecord.getData());
                    });
                }
            }
        },
    },

    listeners: {

    }

});

Ext.application({
    name: 'Fiddle',
    mainView: 'CalApp.view.main.Main'
});

或者监听事件的观点：

Ext.define('CalApp.view.main.Main', {
    extend: 'Ext.calendar.panel.Panel',

    createButton: {
        hidden: true
    },

    defaultView: 'week',

    store: {
        autoLoad: true,
        proxy: {
            type: 'ajax',
            url: 'calendars.json'
        },
        eventStoreDefaults: {
            proxy: {
                type: 'ajax',
                url: 'events.json'
            }
        },
        
    },

    views: {
        day: {
            xtype: 'calendar-day',
            titleTpl: '{start:date("l F d, Y")}',
            controlStoreRange: false,
            label: 'Day',
            weight: 10,
            dayHeader: null
        },
        week: {
            xtype: 'calendar-week',
            dayHeaderFormat: 'D d',
            controlStoreRange: false,
            titleTpl: '{start:date("j M")} - {end:date("j M Y")}',
            label: 'Week',
            weight: 20,
            listeners: {
                beforeeventadd: function (view, context, eOpts) {
                    console.log(context.event.data); //Some Event Data
                    return false;
                },
                beforeeventedit: function (view, context, eOpts) {
                    console.log(context.event.data); //Some Event Data
                    return false;
                },
                beforeeventtap: function (view, context, eOpts) {
                    console.log(context.event.data); //Some Event Data
                    return false;
                },
                validateeventedit: function (view, context, eOpts) {
                    debugger;
                    console.log(context.event.data); //Some Event Data
                    return false;
                },

            }

        },
        month: {
            xtype: 'calendar-month',
            titleTpl: '{start:date("F Y")}',
            label: 'Month',
            weight: 30
        }
    },

});

Ext.application({
    name: 'Fiddle',
    mainView: 'CalApp.view.main.Main'
});

如何在 Ext JS 的日历组件中添加监听器？

How to add listeners in calendar component in Ext JS?

calendar

extjs

event-listener