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事件(参考以上)即可。
最后在后台加上增删该的处理即可,完工。