1200字范文 > ExtJS 日历Calendar 控件使用

ExtJS 日历Calendar 控件使用

时间：2024-03-19 22:15:39

ExtJS6 提供了日历控件，但是官网的demo贼坑，只讲了ajax使用，经过不懈努力地，无头苍蝇式尝试，终于摸到了使用门槛。

首先

在具体项目里，引用calendar的包。

其次

设定好calendar的store，这个很重要。因为，整个日历控件，最主要的就是store对应的事务。你在日历控件上看到的如下图中，每一条，都是一个event

这里采用的store是 memory 内存的模式，不用ajax。我这里有四种事务，有的时候是，某一类事务更新，有的时候是全更新

{type: 'calendar-calendars',autoLoad: true,asynchronousLoad: true, //允许异步加载proxy: {type: 'memory',data: [{id: 1,title: 'Plan',color: '#f69218',eventStore: {model: 'Task.model.calendar.CalMonthEvent', //自定义的model改变了一些东西可以用原本的model，不配置就是原生的asynchronousLoad: true,proxy: {type: 'memory',data: null,reader: {type: 'json',}}}}, {id: 2,title: 'Act',color: '#02b8d0',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory', //采用内存模式data: null,reader: {type: 'json',}}}}, {id: 4,title: 'ToExcSummary',color: '#6f95e1',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory',data: null,reader: {type: 'json',}}}}, {id: 5,title: 'ExSummary', //已批小结color: '#8bc34a',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory',data: null}}}]}

设置好后，把他放入calendar控件中

{xtype: 'calendar-weekview',//可以采用calendar的其他视图这里采用周视图flex: 1,gestureNavigation: false,store:{type: 'calendar-calendars',autoLoad: true,asynchronousLoad: true, //允许异步加载proxy: {type: 'memory',data: [{id: 1,title: 'Plan',color: '#f69218',eventStore: {model: 'Task.model.calendar.CalMonthEvent', //自定义的model改变了一些东西可以用原本的model，不配置就是原生的asynchronousLoad: true,proxy: {type: 'memory',data: null,reader: {type: 'json',}}}}, {id: 2,title: 'Act',color: '#02b8d0',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory', //采用内存模式data: null,reader: {type: 'json',}}}}, {id: 4,title: 'ToExcSummary',color: '#6f95e1',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory',data: null,reader: {type: 'json',}}}}, {id: 5,title: 'ExSummary', //已批小结color: '#8bc34a',eventStore: {model: 'Task.model.calendar.CalMonthEvent',asynchronousLoad: true,proxy: {type: 'memory',data: null}}}]}}

动态赋值

给calendar对象的eventStore对象动态赋值，注意是eventStore

var store = calendar-weeksview对象.getStore();store.getAt(0)._eventStore.loadData(r[0]);//计划store.eventSource.activeLoad = false;store.getAt(1)._eventStore.loadData(r[1].concat(r[2]));//r[1]未批注活动 r[2]批注过的活动store.eventSource.activeLoad = false;store.getAt(2)._eventStore.loadData(r[3]);//未批注的小结store.eventSource.activeLoad = false;store.getAt(3)._eventStore.loadData(r[4]);//已批注的小结

为何每个loadData前，都有个 xxx.activeLoad = true——主要是，

在执行了第一句 loadData后，就在此时 store.eventSource对象，神不知鬼不觉地，将activeLoad 变成了 true

而底层的刷新event的方法里，又有个方法是检验这个值的

如果不加上，就会造成部分事务不被显示的问题，如下图

总不能改底层吧，虽然改了可能也没啥影响，但是还是在自己的代码上动脑筋

每次loadData完，重更下 activeLoad属性即可

一个简单的demo：（注意使用时把里面的startDate和endDate 改一下）