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

• 日历插件的calendar目录的src子目录结构介绍
  
  data目录是日历插件的数据集，示例中的数据集分为两类：
  1)calendar日历
  - CalendarMappings.js：给日历记录提供字段定义以便开发者可以覆盖，比如你的需求需要一些新的字段就可以直接按照它的格式在这继续定义，之所以将字段定义从model中分离出来应该是为了解耦和，方便开发者不至于每次在添加新的字段时都要手动的去重新配置reconfigure Model
  - CalendarModel.js ：主要作用就是当你改变了默认的记录的声明定义时会重新配置model。文档中有详细的英文说明，可自行查看。
  - Calendars.js ：本地存放的展示数据，示例演示用的，开发者可根据本地的json数据格式在后台组织成该格式来返回给前台
  - MemoryCalendarStore.js：读取在本地存放的数据可以用来日历颜色的选择，开发者可定义自己的能够与后台交互的store。
  2)呈现在日历中的event事件
  -EventMappings.js和EventModel.js的作用跟上述的类似就不再重复赘述了。
  -Events.js为本地事件的json数据格式，开发者可根据此格式从后台返回所需要的数据。其中，有5个字段是必须要返回的id,cid(即上述的Calendars.js中的id对应，显示的div的背景色)，title(会显示到日历表中所呈现的div层中)效果如下：
  ，start与end即这个显示的div的上边界（开始时间）和下边界（结束时间）。
  -MemoryEventStore.js：这个store只是为了演示说明使用的，不能用于CRUD操作，要想用于CRUD操作，开发者需要自己定义一个能够与后台交互的store。该文件中有详细的英文说明介绍，读者可自行查看。
  dd目录是可拖拽的目录：关注如下文件即可
  
  • DayDropZone.js：只需看onNodeDrop部分，这里有三个事件类型，分别是eventdrag（整个事件的移动，即所呈现的div面板移动），eventresize（呈现的div面板的高度拉伸变化改变引起的事件类型）和caldrag（取消拖动的事件）
  • rec处得到的是所加载进来的数据，本示例用到的是events.js中本地加载进来的数据，如果是远程加载进来的，则rec处存储的数据就是远程得到的数据。
  • this.onCalendarDragComplete()的声明位于DropZone.js文件中（需要在声明中添加一个参数rec）。如果有这样的一个需求即拖动事件的触发要与后台进行交互以更新拖动导致的时间的变化，则在该方法调用中添加一个参数rec，n.date不用传，因为在调用该方法之前已经调用了this.view.onEventDrop(rec,n.date);该方法的声明是在AbstractCalendar.js中，然后会发现拖动导致的时间变化底层已经帮主处理了并且仍存储在rec中，代码如下：

// private
    onEventDrop: function(rec, dt) {
        if (Ext.calendar.util.Date.compare(rec.data[Ext.calendar.data.EventMappings.StartDate.name], dt) === 0) {
            // no changes
            return;
        }
        var diff = dt.getTime() - rec.data[Ext.calendar.data.EventMappings.StartDate.name].getTime();
        rec.set(Ext.calendar.data.EventMappings.StartDate.name, dt);
        rec.set(Ext.calendar.data.EventMappings.EndDate.name, Ext.calendar.util.Date.add(rec.data[Ext.calendar.data.EventMappings.EndDate.name], {millis: diff}));

        this.fireEvent('eventmove', this, rec);
    }

DayDropZone.js文件修改后的结果如下：

DropZone.js文件修改后的结果如下：

eventresize事件的修改同eventdrag一样，不再重复赘述。
form目录是表单目录
该表单是指点击日历表之后的弹出的对话框
template目录是模板

• BoxLayout.js是更改日历表表头时间的显示风格的，起作用的代码块在applyTemplate函数处为：
  if(showMonth){
if(isToday){
title = this.getTodayText();
}
else{
title = Ext.Date.format(dt, this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
}
}
else{
var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
title = isToday ? this.getTodayText() : Ext.Date.format(dt, dayFmt);
}
  这块代码的主要作用就是在判断是否为今天，如果是，则表头显示的时间为特殊的显示形式，这里会用到extjs的时间格式，如图：
  
  util是工具类，处理时间的以及周的渲染的
  接下来会详细介绍view中的代码应用。

---