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事件（参考以上）即可。

最后在后台加上增删该的处理即可，完工。

 

转载于:https://www.cnblogs.com/peachzhan/p/4104945.html