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