Ext Js：如何在选项卡面板中的不同选项卡上加载不同的日历？

Question

我正在创建一个选项卡面板，其中基于一些json响应动态创建选项卡。

public T ReadRecord<T>(int recordId) where T : MoxRecord
{
    if (typeof(T) == typeof(Contact))
    {
        using (ModulxoDatabaseContext db = new ModulxoDatabaseContext())
        {
            return db.Contacts.FirstOrDefault(r => r.Id.Equals(recordId)) as T;
        }
    }

    if (typeof(T) == typeof(Contactgroup))
    {
        using (ModulxoDatabaseContext db = new ModulxoDatabaseContext())
        {
            return db.Contactgroups.FirstOrDefault(r => r.Id.Equals(recordId)) as T;
        }
    }
    return null;
}

  

我的标签面板声明为（CalendarTabPanel.js）：

require(data.table)

id <- c(1,1,1,2,2,2,3,3,3,4,4)                         # fathers
name <- c('a','b','k','b','e','g','e','f','k','f','u') # sons
data <- data.table(id,name)

# names to be deleted
to_del <- c("e","f")

# returns only id's without any of the names to be deleted
data[ , .SD[ !any(name %in% to_del) ,name ] , by = "id"]

   id V1
1:  1  a
2:  1  b
3:  1  k

  

日历面板：

var tabPanel = Ext.getCmp('calendarTabs');
for (var i = 0; i < data.data.length; i++) {
    var resourceData = data.data[i];

    tabPanel.add({
        title: resourceData['resourceList.resourceName'],
        border: false,
        xtype: 'calendarPanel',
        tabResourceId: resourceData['resourceList.resourceId']

    });
    tabPanel.setActiveTab(0);
}

  

日历商店：

Ext.define('mwmwebapp.view.dispatcher.CalendarTabPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'calendarTabPanel',
    controller: 'calendarTabPanelController',
    tabResourceId: null,
    height: 400,
    layout: 'vbox',

    initComponent: function() {
        Ext.apply(this, {
            width: 700,
            items: [{
                xtype: 'tabpanel',
                margin: '25 0 0 0',
                reference: 'tabpanel',
                id: 'calendarTabs',
                itemId: 'calendarTabs',
                tabResourceId: this.tabResourceId,
                border: false,
                tabPosition: 'left',
                tabBar: {
                    margin: '55 0 0 0'
                },
                tabRotation: 0,
                defaults: {
                    bodyPadding: 10,
                    scrollable: true,
                    border: false
                },
                listeners: {
                    afterrender: 'loadTabs',
                    activeitemchange: function(tabbar, value, oldValue, eOpts) {
                        debugger;
                        console.log(value)
                    }


                }
            }]
        });

        this.callParent();
    }
});

如果有人可以告诉我如何根据resourceId（在切换选项卡上打开的不同日历上显示的不同事件）在日历中加载不同的数据。

  

这是我用日历绑定标签的地方。

Ext.define('mwmwebapp.view.dispatcher.Calendar', {
    extend: 'Ext.panel.Panel',
    xtype: 'calendarPanel',

    requires: [
        'Ext.calendar.panel.Panel',
        'mwmwebapp.store.Calendar',
        'mwmwebapp.view.dispatcher.DispatcherTaskListController'
    ],

    controller: 'dispatcherTaskListController',

    tabResourceId: null,

    width: 1200,
    height: 600,
    autoWidth: false,

    layout: 'hbox',
    initComponent: function() {
        Ext.apply(this, {
            items: [{
                xtype: 'calendar',
                layout: 'fit',
                flex: 8,
                align: 'stretch',
                height: '100%',

                views: {
                    day: {
                        startTime: 1,
                        endTime: 24
                    },
                    workweek: {
                        xtype: 'calendar-week',
                        titleTpl: '{start:date("j M")} - {end:date("j M")}',
                        label: 'Work Week',
                        //weight: 15,
                        dayHeaderFormat: 'D d',
                        firstDayOfWeek: 1,
                        visibleDays: 5,
                        startTime: 1,
                        endTime: 24
                    },
                    week: {
                        startTime: 1,
                        endTime: 24
                    }
                },

                store: {
                    type: 'calendarstore'
                },
                listeners: {
                    beforerender: function(view) {
                        var calendarStore = view.getStore();
                        calendarStore.load();
                    }
                }

            }]

        });
        this.callParent(arguments);
    }
});