在之前文章講過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;
},
});