ExtJs Calendar 控件 使用（二）

在之前文章講過calendar數據加載使用 《ExtJS 日曆Calendar 控件 使用》，其中最重要的一點是關於calendar的數據Event加載。

在ExtJs裏，EventStore的數據格式Fields默認如下：

id ：標識的是數據裏的唯一主鍵 

title :是日曆控件裏的顯示標題

calendarId：標識的是該數據所屬的日程事務類別

startDate：事務開始時間

endDate: 事務結束時間

allDay:是否爲全天事務

description:顯示的描述(注意這裏的description 的值並不會渲染到 周視圖 或月視圖上)

常用配置：

1.設置某天爲全天的事務

若是想事務爲全天狀態，並顯示在頭部，需要設置allDay:true,且 startDate 爲0點的日期，如 2020-04-20 00：00,endDate 爲大於startDate的時間即可

forExample

{
   id: 1001,
   calendarId: 2,
   title: '這是Title',
   description:'這是Description',
   allDay: true,//標記爲全天
   startDate: new Date('2020-04-20 00:00'),//注意必須是0點 或用 Ext.Date.clearTime
   endDate: new Date('2020-04-20 19:00')
}

2.自定義顯示內容

想要變成如下渲染上去，把一些主體顯示出來

需要繼承且局部複寫 Ext.calendar.Event  類, 並重構 getElementConfig,然後在UpdateTitile 方法（或其他Update方法）裏 填充相應的數據

Ext.define('DemoEvent', {
    extend: 'Ext.calendar.Event',
    xtype: 'demoevent',
    getElementConfig: function () {
        var cfg = this.callParent();

        cfg.cls = Ext.baseCSSPrefix + 'calendar-event';

        cfg.children = [{
            cls: Ext.baseCSSPrefix + 'calendar-event-inner',
            reference: 'innerElement',
            children: [{
                    cls: Ext.baseCSSPrefix + 'calendar-event-time',
                    reference: 'timeElement',
                    children: [{
                        tag: 'span',
                        reference: 'startElement',
                        cls: Ext.baseCSSPrefix + 'calendar-event-time-start'
                    }, {
                        tag: 'span',
                        html: ' - ',
                        reference: 'separatorElement',
                        cls: Ext.baseCSSPrefix + 'calendar-event-time-separator'
                    }, {
                        tag: 'span',
                        reference: 'endElement',
                        cls: Ext.baseCSSPrefix + 'calendar-event-time-end'
                    }]
                }, {
                    reference: 'titleElement',
                    tag: 'span',
                    cls: Ext.baseCSSPrefix + 'calendar-event-title'
                },
                //自定義加了個分隔符
                {
                    reference: 'separateElement',
                    tag: 'hr',
                }, {
                    reference: 'descriptionElement', //自定義描述div
                    tag: 'div',
                    cls: Ext.baseCSSPrefix + 'calendar-event-title'
                }, {
                    cls: Ext.baseCSSPrefix + 'calendar-event-resizer',
                    reference: 'resizerElement'
                }
            ]
        }];

        return cfg;
    },
    updateTitle: function (title) {
        title = title || this.getDefaultTitle();
        this.titleElement.setText(title);
        let model = this.getModel();
        if(model) {
            let description = model.get('description');//也可以get其他的列
            if(description)
            this.descriptionElement.setHtml(description);//借用updateTitle方法 填充數據
        }
    },
});

然後在實例calendar控件時 對 eventDefaults 配置項做指定

示例：

{
    xtype: 'calendar-weekview',
    flex: 1,
    gestureNavigation: false,
    eventDefaults: {
       xtype: 'demoevent',//指定爲自定義的事務 控件
     },
}

3.轉爲列數據

有時服務端返回的數據不一定是 startDate 或 endDate 亦或其他fields裏需要的列名。

例如：服務端返回的數據格式是

{id:1,calendarId:1,RealSDate:'2020-04-23 00:00',RealEDate:'2020-04-23 19:00'}

這時，由於缺少 eventStore的Model需要的startDate和endDate,所以要轉換下。自定義一個model，然後對相應字段的get方法做轉換處理 

Ext.define('ModelDemo', {
    extend: 'Ext.calendar.model.Event', //繼承原本的evnetModel
    getStartDate: function () {
        return this.data.RealSDate;
    },
    getEndDate: function () {
        return this.data.RealEDate;
    },
});