首页 > 代码库 > ZP的EXTJS学习笔记（二）——calendar的改造（example改造、日程管理实现、json对date数据的前后台处理）
ZP的EXTJS学习笔记（二）——calendar的改造（example改造、日程管理实现、json对date数据的前后台处理）
半月前做的日程提醒，改造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事件（参考以上）即可。
最后在后台加上增删该的处理即可，完工。
ZP的EXTJS学习笔记（二）——calendar的改造（example改造、日程管理实现、json对date数据的前后台处理）