Extjs4.0日历插件与项目整合的详细介绍（二）

  之前已经细说过日历插件的其中一部分，接下来会对view目录下的文件进行详细的介绍，该目录下的文件多数是控制日历插件的展示的，比如显示到日历表上的div层，禁止可拖拽功能以及按照国内日历的习惯，一周从周一开始而不是周天等。

1. AbstractCalendar.js该文件主要是为其他的view提供基础服务的抽象类。
- 控制表头中的一周从周一开始

- 通过确定开始日期来确定展示一周的日期范围：setStartDate函数处
- 这里有一个坑，如果数据是从服务端远程加载过来的，那么整个日历表格呈现的第一个div层会从这一天的凌晨开始一直到加载进来的结束时间为止（会比正常效果要大），原因是出在这里：

2.Day.js该文件主要是控制DayBodyView和DayHeaderView的layout的，不需要改动
3.DayBody.js该文件的主要作用就是计算得到日历表格，有一个算法。
- getEventBodyMarkup这个函数是用来得到一个呈现在日历表格的div层模板，后台加载得到的数据可以按照模板中的格式得到使之呈现在div层中让其展示出来。当然来，如果自己想设计另一个模板，可以复制这段代码块，当然别忘了，给这段代码块中的全局变量起另一个别名哦。
-
- getEventTemplate：当你复制了上述模板后，还不能直接用，还需要在复制getEventTemplate这个函数。这个函数的作用就是判断浏览器的兼容性选择合适的模板，并编译得到html中的div那种元素。同样，这块代码处的全局变量也需要另起名称，截图只改了一部分，有需要请自行补全。
-
- getTemplateEventBox：算法函数，计算每一个事件模板盒子大小与日历表格所对应的时间的对应关系。如果开发者想改变日历表格的大小，需要更改一个样式文件calendar.css。用快捷键搜索42px即可，因为在前端展示效果来看每一个1小时的单元格区间高度是42px，因此读者可把该文件下的所有的42px都适当的放大相应的倍数即可，当然了，半小时的中间线即以42px的一半21px进行搜索，它也变成扩大n倍后的1小时区间高度的一半即可。当然了，做完这些，从后台加载进来的数据所要呈现的div时间边界发现与修改后的产生冲突，也就是并没按照修改后的时间对齐，这是因为我们仅仅更改了样式文件，它的算法我们还没更改。它的算法就在本块代码处。
-
- renderItems：这个函数十分重要，它是渲染函数，即渲染之前编译后的div模板。之前不是说了有一种需求，需要显示多种类型的div模板并做了相应的准备工作了吗（复制和更改），我们说要对模板进行判断，判断的地方就在该函数处。
-
- getDayAt：这个函数是与拖动事件有关的。因为，如果不进行修改，你会发现，即便你做了上面的工作以后，当你拖动的时候，底层还是按照原来的样式（21px）为一个拖动单位的。因此这里也需要进行相应的修改工作，以便拖动事件能够拖动并显示。
-
-
4.CalendarPanel.js：Ext的日历视图的默认容器，可支持多种视图，比如day ,week,month。在这里可以控制视图的显示方式，比如只显示周视图等，以及可以去掉视图导航栏等。可自行查看该文件有详细的英文说明介绍供开发者参考选择使用。
- initEventRelay：这里有一个可供开发者选择更改的函数，比如事件的禁用，简便方法就是直接注释掉即可。可根据需求自行抉择。
5.App.js整个日历的入口。对了远程加载数据发送的请求就在此处，官方提供的实例中用到的是本地的store数据集，开发者可将其注释掉，自行创建一个与后台交互的数据集，格式是需要一致的哦，即还是那个变量名。同样，开发者也可根据项目需求自行添加搜索等其它组件在viewport窗口中。重要的一出就是，如果是通过自己添加的组件，比如查询按钮来触发日历视图的变化，需要自己根据需求在适当的位置添加：Ext.getCmp('app-calendar').setStartDate(dt);dt就是你从后台返回到前台的日期时间。