ZP's ExtJS study notes (ii)--calendar Transformation (example transformation, schedule management implementation, JSON-to-date data pre-and post-processing)

The calendar that was made half a month ago reminds me to transform the calendar of example in Extjs4.2.1. First of all to see the effect:

The presentation of the Schedule homepage:

Show by week and Schedule edit window:

It's the most beautiful thing I've ever done since I joined the profession, and of course it's ExtJS powerful features. In the study ExtJS prophase Transformation example is a very good learning means, I benefited from it.

I use Ssh2+extjs to do this, and the Schedule section is as follows:

I was placed directly under the Webroot under Ext folder, a few folders can not be missing, examples under the shared and Ux,example peer resources, these can be found from the ext-4.2.1 folder.

The index.html of the schedule can be used in the original case, slightly changed to the next path. App.js is key, beginners, please read it in detail, it defines two stores, and the various methods of triggering events, especially those methods, is our main tool to implement the logic.

1, This.calendarstore = ext.create (' Ext.calendar.data.MemoryCalendarStore ', {
Data:Ext.calendar.data.Calendars.getData ()
});

The first defined Calendarstore does not change, it is used to store the schedule type: Home, work, school, if you want to add type or dynamic load type, go to modify the store definition file.

2, This.eventstore = Ext.create (' Ext.calendar.data.MemoryEventStore ', {});

3, the main viewport and the pop-up window Editwindow event processing. (Details later)

The above 3 points are the main configuration for the app in the calendar. Then I'll start with the Memoryeventstore:

1. Add Agent

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 '                        }             }

Remove the data that was originally configured, add the Ajax proxy as above, and configure the action connection as handled in 4 in the API above.

2. Background processing:

Ssh2 back to the front desk to write JSON.

String Rjson = Dateeventtojson (dateeventlist); this. Getservletresponse (). Getwriter (). write (Rjson);

Dateeventtojson converted the background data into JSON, which I wrote as follows:

 PublicString Dateeventtojson (list<dateevent>eventlist) {StringBuffer JSON=NewStringBuffer (); Json.append ("{\" success\ ": true"); BooleanIsFirst =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 ("]}"); }        returnjson.tostring (); }

Finally, send a list of JSON to the foreground as follows:

{"Success": true, "Evts": [{"EventId": "64298669-9cdc-4069-a5e0-952cb8fd7334", "CalendarID": 2, "Startstr" : 1414944000000, "endstr": 1417021200000, "Title": "Test 1177122", "Isallday": True, "Notes": "Arthur Great Times Asdasd", "Reminder": " 1440 "},{" EventId ":" fff534ac-a738-4297-8ce0-42dd9e322704 "," CalendarID ": 2," Startstr ": 1415116800000," Endstr " : 1415145600000, "Title": "sada233", "Notes": "But Iiii"}]}

I am not too aware of how the date data is converted to JSON, the foreground is how to accept processing, I used a more fucked-up method, in the background to convert the time into a string (shaped like "startstr": 1414944000000), The foreground receive processing is converted to a Date object when it is required to use a day object. Add as needed in src/view/abstractcalendar.js at a specific location:data[m.startdate.name]=ext.date.add (New Date (data[m.startstr.name ]));

I will, of course, revise the src/data/eventmodel.js to read as follows:

Ext.define (' Ext.calendar.data.EventModel ', {    ' 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 ']    });

At the same time, when requesting other transactions from the foreground, the date is then turned into str,rec.data.StartStr = Rec.data.StartDate.getTime (); This is added to the event handling in App.js.

The event trigger function is then modified as required. ( 3rd of app.js configuration above )

1. Add a new schedule event (Editwindow)

' Eventadd ': {fn:function(Win, rec) {//alert ("AddIn");win.hide (); Rec.data.IsNew=true; Rec.data.EventId=math.uuid ();//The generation of the UUID of the JS, there is a need to comment that//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. Update the Schedule event (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. Delete the Schedule event (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                    }

I edited out some questions in detail and I canceled show details, all in one window. So I configured the move, resize event (see above) in viewport.

Finally in the background add and delete the processing can be completed.

ZP's ExtJS study notes (ii)--calendar Transformation (example transformation, schedule management implementation, JSON-to-date data pre-and post-processing)