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

debugcn 发表于 Dev

闪光戈登

如何添加侦听器以捕获日历组件Ext.calendar.panel.Panel中事件的某些变化？在这篇文章之后，我尝试了所有列出的事件，但是没有一个起作用。

亚瑟·鲁本斯

您可以侦听Ext.calendar.store.Events.html事件。就像是：

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'
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。