半月前做的日程提醒，改造Extjs4.2.1中example的calendar实现的。先给大家看下效果：
日程主页的展现：
按周显示以及日程编辑窗口：
这是我入行以来感觉做的最漂亮的一次了，当然得得益于ExtJs强大的功能。在学习ExtJs前期改造Example是个很好的学习手段，本人从中受益匪浅。
我用的是ssh2+Extjs做的，日程部分框架如下：
我是直接放在webroot下ext的文件夹下的，几个文件夹不能缺，examples下的shared与ux，example平级的resources，这些都能从ext-4.2.1文件夹中找到。
日程的index.html基本可用案例原来的，稍改下路径即可。App.js很关键，初学请详细阅读之，其定义了两个store，以及各个触发事件的方法，尤其是那些方法，是我们实现逻辑的主要工具。
1、this.calendarStore = Ext.create(‘Ext.calendar.data.MemoryCalendarStore‘, {
data: Ext.calendar.data.Calendars.getData()
});
首先定义的calendarStore不用改变，其用于存储日程类型：家庭、工作、学校，如果想增加类型或者动态加载类型，去修改该store定义文件即可。
2、this.eventStore = Ext.create(‘Ext.calendar.data.MemoryEventStore‘, {});
3、主Viewport以及弹窗EditWindow的事件处理。（后面详说）
以上3点是改造calendar中对App的主要配置。接着我先说下对MemoryEventStore的改造：
1、添加代理
proxy: {
type: ‘ajax‘,
//url: ‘../system/readDateData.dhtml‘,
api: {
read: ‘../event/readDateData.dhtml‘,
update: ‘../event/updateDateData.dhtml‘,
create: ‘../event/updateDateData.dhtml‘,
destroy: ‘../event/updateDateData.dhtml‘
},
reader: {
type: ‘json‘,
root: ‘evts‘,
successProperty: ‘success‘
},
writer: {
type: ‘json‘
}
}
去除其中本来配置的data，添加如上的ajax proxy，并且配置如上的api中的4中处理时的action连接。
2、后台处理：
ssh2后台向前台写json。
String rjson = dateEventToJson(dateEventList); this.getServletResponse().getWriter().write(rjson);
dateEventToJson将后台数据转换成json，我写的如下：
public String dateEventToJson(List<DateEvent> eventList) {
StringBuffer json = new StringBuffer();
json.append("{\"success\":true");
boolean isFirst = true;
if (eventList != null && eventList.size() > 0) {
json.append(",\"evts\":[");
for (DateEvent e : eventList) {
if (StringUtil.isNotEmpty(e.getEventId())) {
if (isFirst) {
json.append("{\"EventId\":\"" + e.getEventId() + "\"");
isFirst = false;
} else {
json.append(",{\"EventId\":\"" + e.getEventId() + "\"");
}
json.append(",\"CalendarId\":" + e.getCalendarId());
json.append(",\"StartStr\":" + e.getStartStr());
json.append(",\"EndStr\":" + e.getEndStr());
json.append(",\"Title\":\"" + e.getTitle() + "\"");
if (e.getIsAllDay() == 1)
json.append(",\"IsAllDay\":true");
if (StringUtil.isNotEmpty(e.getLocation()))
json
.append(",\"Location\":\"" + e.getLocation()
+ "\"");
if (StringUtil.isNotEmpty(e.getNotes()))
json.append(",\"Notes\":\"" + e.getNotes() + "\"");
if (StringUtil.isNotEmpty(e.getUrl()))
json.append(",\"Url\":\"" + e.getUrl() + "\"");
if (StringUtil.isNotEmpty(e.getReminder())) {
json.append(",\"Reminder\":\"" + e.getReminder()
+ "\"}");
} else {
json.append("}");
}
}
}
json.append("]}");
}
return json.toString();
}
最后回向前台发送一串如下的json：
{"success":true,"evts":[{"EventId":"64298669-9CDC-4069-A5E0-952CB8FD7334","CalendarId":2,"StartStr":1414944000000,"EndStr":1417021200000,"Title":"测试1177122","IsAllDay":true,"Notes":"阿瑟大时代asdasd","Reminder":"1440"},{"EventId":"FFF534AC-A738-4297-8CE0-42DD9E322704","CalendarId":2,"StartStr":1415116800000,"EndStr":1415145600000,"Title":"sada233","Notes":"但是是IIII"}]}
本人不是太了解date数据是怎么转换成json的，前台又是怎么接受处理的，我采用了一种比较操蛋的方法，在后台将时间转换成time字符串（形如"StartStr":1414944000000），前台接收处理时在需要使用日期对象的时候转换成date对象。即在src/view/AbstractCalendar.js中在特定位置按需要添加：data[M.StartDate.name]=Ext.Date.add(new Date(data[M.StartStr.name]));
当然之前我将src/data/EventModel.js中修改成如下：
Ext.define(‘Ext.calendar.data.EventModel‘, {
extend: ‘Ext.data.Model‘,
requires: [
‘Ext.util.MixedCollection‘,
‘Ext.calendar.data.EventMappings‘
],
fields: [‘EventId‘,‘CalendarId‘,‘Title‘,‘StartStr‘,‘EndStr‘,‘StartDate‘,‘EndDate‘,‘Location‘,‘Notes‘,‘Url‘,‘IsAllDay‘,‘Reminder‘,‘IsNew‘,‘OperateType‘]
});
同时在前台向后台请求其他事务时将date再转成str，rec.data.StartStr = rec.data.StartDate.getTime();这是加在app.js中事件处理中的。
之后就是按照需求修改事件触发函数了。（上面app.js配置的第三点）
1、添加新日程事件（EditWindow中）
‘eventadd‘: {
fn: function(win, rec){
//alert("addin");
win.hide();
rec.data.IsNew = true;
rec.data.EventId = Math.uuid();//另外引的生成uuid的js，有需要的评论说
//alert(rec.data.EventId);
rec.data.StartStr = rec.data.StartDate.getTime();
rec.data.EndStr = rec.data.EndDate.getTime();
rec.data.OperateType="add";
this.eventStore.add(rec);
this.eventStore.sync();
this.showMsg(‘Event ‘+ rec.data.Title +‘ was added‘);
this.eventStore.reload();
},
scope: this
}
2、更新日程事件（EditWindow中）
‘eventupdate‘: {
fn: function(win, rec){
win.hide();
rec.data.StartStr = rec.data.StartDate.getTime();
rec.data.EndStr = rec.data.EndDate.getTime();
rec.data.OperateType="update";
this.eventStore.add(rec);
//rec.commit();
this.eventStore.sync();
//alert("update!");
this.showMsg(‘Event ‘+ rec.data.Title +‘ was updated‘);
},
scope: this
}
3、删除日程事件（EditWindow中）
‘eventdelete‘: {
fn: function(win, rec){
rec.data.IsNew = false;
rec.data["OperateType"]="delete";
alert(rec.data.EventId);
this.eventStore.remove(rec);
this.eventStore.sync();
win.hide();
this.showMsg(‘Event ‘+ rec.data.Title +‘ was deleted‘);
},
scope: this
}
在detail中编辑出了些问题，我就取消了show details，全部在一个窗口中展现了。所以我在Viewport中配置move、resize事件（参考以上）即可。
最后在后台加上增删该的处理即可，完工。