+++ /dev/null
-/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-/*\r
- * Calendar sample code originally written by Brian Moeskau (brian@ext-calendar.com)\r
- * See additional calendar examples at http://ext-calendar.com\r
- */\r
-App = function() {\r
- return {\r
- init : function() {\r
- \r
- Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';\r
-\r
- // This is an example calendar store that enables the events to have\r
- // different colors based on CalendarId. This is not a fully-implmented\r
- // multi-calendar implementation, which is beyond the scope of this sample app\r
- this.calendarStore = new Ext.data.JsonStore({\r
- storeId: 'calendarStore',\r
- root: 'calendars',\r
- idProperty: 'id',\r
- data: calendarList, // defined in calendar-list.js\r
- proxy: new Ext.data.MemoryProxy(),\r
- autoLoad: true,\r
- fields: [\r
- {name:'CalendarId', mapping: 'id', type: 'int'},\r
- {name:'Title', mapping: 'title', type: 'string'}\r
- ],\r
- sortInfo: {\r
- field: 'CalendarId',\r
- direction: 'ASC'\r
- }\r
- });\r
-\r
- // A sample event store that loads static JSON from a local file. Obviously a real\r
- // implementation would likely be loading remote data via an HttpProxy, but the\r
- // underlying store functionality is the same. Note that if you would like to \r
- // provide custom data mappings for events, see EventRecord.js.\r
- this.eventStore = new Ext.data.JsonStore({\r
- id: 'eventStore',\r
- root: 'evts',\r
- data: eventList, // defined in event-list.js\r
- proxy: new Ext.data.MemoryProxy(),\r
- fields: Ext.calendar.EventRecord.prototype.fields.getRange(),\r
- sortInfo: {\r
- field: 'StartDate',\r
- direction: 'ASC'\r
- }\r
- });\r
- \r
- // This is the app UI layout code. All of the calendar views are subcomponents of\r
- // CalendarPanel, but the app title bar and sidebar/navigation calendar are separate\r
- // pieces that are composed in app-specific layout code since they could be ommitted\r
- // or placed elsewhere within the application.\r
- new Ext.Viewport({\r
- layout: 'border',\r
- renderTo: 'calendar-ct',\r
- items: [{\r
- id: 'app-header',\r
- region: 'north',\r
- height: 35,\r
- border: false,\r
- contentEl: 'app-header-content'\r
- },{\r
- id: 'app-center',\r
- title: '...', // will be updated to view date range\r
- region: 'center',\r
- layout: 'border',\r
- items: [{\r
- id:'app-west',\r
- region: 'west',\r
- width: 176,\r
- border: false,\r
- items: [{\r
- xtype: 'datepicker',\r
- id: 'app-nav-picker',\r
- cls: 'ext-cal-nav-picker',\r
- listeners: {\r
- 'select': {\r
- fn: function(dp, dt){\r
- App.calendarPanel.setStartDate(dt);\r
- },\r
- scope: this\r
- }\r
- }\r
- }]\r
- },{\r
- xtype: 'calendarpanel',\r
- eventStore: this.eventStore,\r
- calendarStore: this.calendarStore,\r
- border: false,\r
- id:'app-calendar',\r
- region: 'center',\r
- activeItem: 2, // month view\r
- \r
- // CalendarPanel supports view-specific configs that are passed through to the \r
- // underlying views to make configuration possible without explicitly having to \r
- // create those views at this level:\r
- monthViewCfg: {\r
- showHeader: true,\r
- showWeekLinks: true,\r
- showWeekNumbers: true\r
- },\r
- \r
- // Some optional CalendarPanel configs to experiment with:\r
- //showDayView: false,\r
- //showWeekView: false,\r
- //showMonthView: false,\r
- //showNavBar: false,\r
- //showTodayText: false,\r
- //showTime: false,\r
- //title: 'My Calendar', // the header of the calendar, could be a subtitle for the app\r
- \r
- // Once this component inits it will set a reference to itself as an application\r
- // member property for easy reference in other functions within App.\r
- initComponent: function() {\r
- App.calendarPanel = this;\r
- this.constructor.prototype.initComponent.apply(this, arguments);\r
- },\r
- \r
- listeners: {\r
- 'eventclick': {\r
- fn: function(vw, rec, el){\r
- this.showEditWindow(rec, el);\r
- this.clearMsg();\r
- },\r
- scope: this\r
- },\r
- 'eventover': function(vw, rec, el){\r
- //console.log('Entered evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);\r
- },\r
- 'eventout': function(vw, rec, el){\r
- //console.log('Leaving evt rec='+rec.data.Title+', view='+ vw.id +', el='+el.id);\r
- },\r
- 'eventadd': {\r
- fn: function(cp, rec){\r
- this.showMsg('Event '+ rec.data.Title +' was added');\r
- },\r
- scope: this\r
- },\r
- 'eventupdate': {\r
- fn: function(cp, rec){\r
- this.showMsg('Event '+ rec.data.Title +' was updated');\r
- },\r
- scope: this\r
- },\r
- 'eventdelete': {\r
- fn: function(cp, rec){\r
- this.showMsg('Event '+ rec.data.Title +' was deleted');\r
- },\r
- scope: this\r
- },\r
- 'eventcancel': {\r
- fn: function(cp, rec){\r
- // edit canceled\r
- },\r
- scope: this\r
- },\r
- 'viewchange': {\r
- fn: function(p, vw, dateInfo){\r
- if(this.editWin){\r
- this.editWin.hide();\r
- };\r
- if(dateInfo !== null){\r
- // will be null when switching to the event edit form so ignore\r
- Ext.getCmp('app-nav-picker').setValue(dateInfo.activeDate);\r
- this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);\r
- }\r
- },\r
- scope: this\r
- },\r
- 'dayclick': {\r
- fn: function(vw, dt, ad, el){\r
- this.showEditWindow({\r
- StartDate: dt,\r
- IsAllDay: ad\r
- }, el);\r
- this.clearMsg();\r
- },\r
- scope: this\r
- },\r
- 'rangeselect': {\r
- fn: function(win, dates, onComplete){\r
- this.showEditWindow(dates);\r
- this.editWin.on('hide', onComplete, this, {single:true});\r
- this.clearMsg();\r
- },\r
- scope: this\r
- },\r
- 'eventmove': {\r
- fn: function(vw, rec){\r
- rec.commit();\r
- var time = rec.data.IsAllDay ? '' : ' \\a\\t g:i a';\r
- this.showMsg('Event '+ rec.data.Title +' was moved to '+rec.data.StartDate.format('F jS'+time));\r
- },\r
- scope: this\r
- },\r
- 'eventresize': {\r
- fn: function(vw, rec){\r
- rec.commit();\r
- this.showMsg('Event '+ rec.data.Title +' was updated');\r
- },\r
- scope: this\r
- },\r
- 'eventdelete': {\r
- fn: function(win, rec){\r
- this.eventStore.remove(rec);\r
- this.showMsg('Event '+ rec.data.Title +' was deleted');\r
- },\r
- scope: this\r
- },\r
- 'initdrag': {\r
- fn: function(vw){\r
- if(this.editWin && this.editWin.isVisible()){\r
- this.editWin.hide();\r
- }\r
- },\r
- scope: this\r
- }\r
- }\r
- }]\r
- }]\r
- });\r
- },\r
- \r
- // The edit popup window is not part of the CalendarPanel itself -- it is a separate component.\r
- // This makes it very easy to swap it out with a different type of window or custom view, or omit\r
- // it altogether. Because of this, it's up to the application code to tie the pieces together.\r
- // Note that this function is called from various event handlers in the CalendarPanel above.\r
- showEditWindow : function(rec, animateTarget){\r
- if(!this.editWin){\r
- this.editWin = new Ext.calendar.EventEditWindow({\r
- calendarStore: this.calendarStore,\r
- listeners: {\r
- 'eventadd': {\r
- fn: function(win, rec){\r
- win.hide();\r
- rec.data.IsNew = false;\r
- this.eventStore.add(rec);\r
- this.showMsg('Event '+ rec.data.Title +' was added');\r
- },\r
- scope: this\r
- },\r
- 'eventupdate': {\r
- fn: function(win, rec){\r
- win.hide();\r
- rec.commit();\r
- this.showMsg('Event '+ rec.data.Title +' was updated');\r
- },\r
- scope: this\r
- },\r
- 'eventdelete': {\r
- fn: function(win, rec){\r
- this.eventStore.remove(rec);\r
- win.hide();\r
- this.showMsg('Event '+ rec.data.Title +' was deleted');\r
- },\r
- scope: this\r
- },\r
- 'editdetails': {\r
- fn: function(win, rec){\r
- win.hide();\r
- App.calendarPanel.showEditForm(rec);\r
- }\r
- }\r
- }\r
- });\r
- }\r
- this.editWin.show(rec, animateTarget);\r
- },\r
- \r
- // The CalendarPanel itself supports the standard Panel title config, but that title\r
- // only spans the calendar views. For a title that spans the entire width of the app\r
- // we added a title to the layout's outer center region that is app-specific. This code\r
- // updates that outer title based on the currently-selected view range anytime the view changes.\r
- updateTitle: function(startDt, endDt){\r
- var p = Ext.getCmp('app-center');\r
- \r
- if(startDt.clearTime().getTime() == endDt.clearTime().getTime()){\r
- p.setTitle(startDt.format('F j, Y'));\r
- }\r
- else if(startDt.getFullYear() == endDt.getFullYear()){\r
- if(startDt.getMonth() == endDt.getMonth()){\r
- p.setTitle(startDt.format('F j') + ' - ' + endDt.format('j, Y'));\r
- }\r
- else{\r
- p.setTitle(startDt.format('F j') + ' - ' + endDt.format('F j, Y'));\r
- }\r
- }\r
- else{\r
- p.setTitle(startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y'));\r
- }\r
- },\r
- \r
- // This is an application-specific way to communicate CalendarPanel event messages back to the user.\r
- // This could be replaced with a function to do "toast" style messages, growl messages, etc. This will\r
- // vary based on application requirements, which is why it's not baked into the CalendarPanel.\r
- showMsg: function(msg){\r
- Ext.fly('app-msg').update(msg).removeClass('x-hidden');\r
- },\r
- \r
- clearMsg: function(){\r
- Ext.fly('app-msg').update('').addClass('x-hidden');\r
- }\r
- }\r
-}();\r
-\r
-Ext.onReady(App.init, App);\r
git.ithinksw.org / extjs.git / blobdiff