[619] | 1 | /* |
---|
| 2 | * Ext JS Library 0.30 |
---|
| 3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
| 4 | * licensing@extjs.com |
---|
| 5 | * |
---|
| 6 | * http://extjs.com/license |
---|
| 7 | */ |
---|
| 8 | |
---|
| 9 | |
---|
| 10 | Ext.onReady(function(){ |
---|
| 11 | Ext.QuickTips.init(); |
---|
| 12 | |
---|
| 13 | var win = window.nativeWindow; |
---|
| 14 | |
---|
| 15 | var opener = Ext.air.NativeWindow.getRootHtmlWindow(); |
---|
| 16 | var taskId = String(window.location).split('=')[1]; |
---|
| 17 | var isNew = !taskId; |
---|
| 18 | var completed = false; |
---|
| 19 | |
---|
| 20 | win.title = 'Task - ' + Ext.util.Format.ellipsis(getTask().data.title, 40); |
---|
| 21 | |
---|
| 22 | var tb = new Ext.Toolbar({ |
---|
| 23 | region: 'north', |
---|
| 24 | height:26, |
---|
| 25 | id:'main-tb', |
---|
| 26 | items:[{ |
---|
| 27 | id:'cpl-btn', |
---|
| 28 | iconCls: 'icon-mark-complete', |
---|
| 29 | text: 'Mark Complete', |
---|
| 30 | handler: function(){ |
---|
| 31 | setCompleted(!completed); |
---|
| 32 | if(completed) { |
---|
| 33 | setMsg('This task was completed on ' + new Date().format('l, F d, Y')); |
---|
| 34 | } |
---|
| 35 | if(validate()) { |
---|
| 36 | (function(){ |
---|
| 37 | saveData(); |
---|
| 38 | if (completed) { |
---|
| 39 | win.close(); |
---|
| 40 | } |
---|
| 41 | }).defer(250); |
---|
| 42 | } |
---|
| 43 | } |
---|
| 44 | },'-', |
---|
| 45 | {iconCls: 'icon-delete-task', text: 'Delete', handler: function(){ |
---|
| 46 | Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task?', function(btn){ |
---|
| 47 | if(btn == 'yes'){ |
---|
| 48 | opener.tx.data.tasks.remove(getTask()); |
---|
| 49 | win.close(); |
---|
| 50 | } |
---|
| 51 | }); |
---|
| 52 | }} |
---|
| 53 | ] |
---|
| 54 | }); |
---|
| 55 | |
---|
| 56 | var title = new Ext.form.TextField({ |
---|
| 57 | fieldLabel: 'Task Subject', |
---|
| 58 | name: 'title', |
---|
| 59 | anchor: '100%' |
---|
| 60 | }); |
---|
| 61 | |
---|
| 62 | var dueDate = new Ext.form.DateField({ |
---|
| 63 | fieldLabel: 'Due Date', |
---|
| 64 | name: 'dueDate', |
---|
| 65 | width: 135, |
---|
| 66 | format: 'm/d/Y' |
---|
| 67 | }); |
---|
| 68 | |
---|
| 69 | var list = new ListSelector({ |
---|
| 70 | fieldLabel: 'Task List', |
---|
| 71 | name: 'listId', |
---|
| 72 | store: opener.tx.data.lists, |
---|
| 73 | anchor: '100%' |
---|
| 74 | }); |
---|
| 75 | |
---|
| 76 | list.on('render', function(){ |
---|
| 77 | this.menu.on('beforeshow', function(m){ |
---|
| 78 | list.tree.setWidth(Math.max(180, list.getSize().width)); |
---|
| 79 | }); |
---|
| 80 | }); |
---|
| 81 | win.addEventListener('closing', function(){ |
---|
| 82 | opener.tx.data.lists.unbindTree(list.tree); |
---|
| 83 | }); |
---|
| 84 | |
---|
| 85 | |
---|
| 86 | var hasReminder = new Ext.form.Checkbox({ |
---|
| 87 | boxLabel: 'Reminder:', |
---|
| 88 | checked: false |
---|
| 89 | }); |
---|
| 90 | |
---|
| 91 | var reminder = new Ext.ux.form.DateTime({ |
---|
| 92 | name: 'reminder', |
---|
| 93 | disabled: true, |
---|
| 94 | timeFormat: 'g:i A', |
---|
| 95 | dateFormat: 'm/d/Y', |
---|
| 96 | timeConfig: { |
---|
| 97 | tpl: opener.Templates.timeField, |
---|
| 98 | listClass:'x-combo-list-small', |
---|
| 99 | maxHeight:100 |
---|
| 100 | } |
---|
| 101 | }); |
---|
| 102 | |
---|
| 103 | var description = new Ext.form.HtmlEditor({ |
---|
| 104 | hideLabel: true, |
---|
| 105 | name: 'description', |
---|
| 106 | anchor: '100% -95', // anchor width by percentage and height by raw adjustment |
---|
| 107 | onEditorEvent : function(e){ |
---|
| 108 | var t; |
---|
| 109 | if(e.browserEvent.type == 'mousedown' && (t = e.getTarget('a', 3))){ |
---|
| 110 | t.target = '_blank'; |
---|
| 111 | } |
---|
| 112 | this.updateToolbar(); |
---|
| 113 | } |
---|
| 114 | }); |
---|
| 115 | |
---|
| 116 | var form = new Ext.form.FormPanel({ |
---|
| 117 | region:'center', |
---|
| 118 | baseCls: 'x-plain', |
---|
| 119 | labelWidth: 75, |
---|
| 120 | margins:'10 10 5 10', |
---|
| 121 | |
---|
| 122 | buttonAlign: 'right', |
---|
| 123 | minButtonWidth: 80, |
---|
| 124 | buttons:[{ |
---|
| 125 | text: 'OK', |
---|
| 126 | handler: function(){ |
---|
| 127 | if(validate()) { |
---|
| 128 | saveData(); |
---|
| 129 | window.nativeWindow.close(); |
---|
| 130 | } |
---|
| 131 | } |
---|
| 132 | },{ |
---|
| 133 | text: 'Cancel', |
---|
| 134 | handler: function(){ window.nativeWindow.close(); } |
---|
| 135 | }], |
---|
| 136 | |
---|
| 137 | |
---|
| 138 | items: [{ |
---|
| 139 | xtype:'box', |
---|
| 140 | autoEl: {id:'msg'} |
---|
| 141 | }, |
---|
| 142 | title,{ |
---|
| 143 | layout: 'column', |
---|
| 144 | anchor: '100%', |
---|
| 145 | baseCls: 'x-plain', |
---|
| 146 | items: [{ |
---|
| 147 | width: 250, |
---|
| 148 | layout: 'form', |
---|
| 149 | baseCls: 'x-plain', |
---|
| 150 | items: dueDate |
---|
| 151 | }, { |
---|
| 152 | columnWidth: 1, |
---|
| 153 | layout: 'form', |
---|
| 154 | baseCls: 'x-plain', |
---|
| 155 | labelWidth:55, |
---|
| 156 | items: list |
---|
| 157 | }] |
---|
| 158 | },{ |
---|
| 159 | xtype:'box', |
---|
| 160 | autoEl: {cls:'divider'} |
---|
| 161 | },{ |
---|
| 162 | layout: 'column', |
---|
| 163 | anchor: '100%', |
---|
| 164 | baseCls: 'x-plain', |
---|
| 165 | items: [{ |
---|
| 166 | width: 80, |
---|
| 167 | layout: 'form', |
---|
| 168 | baseCls: 'x-plain', |
---|
| 169 | hideLabels: true, |
---|
| 170 | items: hasReminder |
---|
| 171 | }, { |
---|
| 172 | columnWidth: 1, |
---|
| 173 | layout: 'form', |
---|
| 174 | baseCls: 'x-plain', |
---|
| 175 | hideLabels: true, |
---|
| 176 | items: reminder |
---|
| 177 | }] |
---|
| 178 | }, |
---|
| 179 | description] |
---|
| 180 | }); |
---|
| 181 | |
---|
| 182 | var viewport = new Ext.Viewport({ |
---|
| 183 | layout:'border', |
---|
| 184 | items:[tb, form] |
---|
| 185 | }); |
---|
| 186 | |
---|
| 187 | var msg = Ext.get('msg'); |
---|
| 188 | var task = getTask(); |
---|
| 189 | |
---|
| 190 | if(task && task.data.completedDate){ |
---|
| 191 | setMsg('This task was completed on ' + task.data.completedDate.format('l, F d, Y')); |
---|
| 192 | } |
---|
| 193 | |
---|
| 194 | hasReminder.on('check', function(cb, checked){ |
---|
| 195 | reminder.setDisabled(!checked); |
---|
| 196 | if(checked && !reminder.getValue()){ |
---|
| 197 | reminder.setValue(opener.tx.data.getDefaultReminder(getTask())); |
---|
| 198 | } |
---|
| 199 | }); |
---|
| 200 | |
---|
| 201 | refreshData.defer(10); |
---|
| 202 | |
---|
| 203 | win.visible = true; |
---|
| 204 | win.activate(); |
---|
| 205 | |
---|
| 206 | title.focus(); |
---|
| 207 | |
---|
| 208 | function refreshData(){ |
---|
| 209 | if(!isNew){ |
---|
| 210 | var task = getTask(); |
---|
| 211 | hasReminder.setValue(!!task.data.reminder); |
---|
| 212 | form.getForm().loadRecord(task); |
---|
| 213 | setCompleted(task.data.completed); |
---|
| 214 | } |
---|
| 215 | } |
---|
| 216 | |
---|
| 217 | function saveData(){ |
---|
| 218 | var task; |
---|
| 219 | if(isNew){ |
---|
| 220 | task = opener.tx.data.tasks.createTask( |
---|
| 221 | title.getValue(), |
---|
| 222 | list.getRawValue(), |
---|
| 223 | dueDate.getValue(), |
---|
| 224 | description.getValue(), |
---|
| 225 | completed |
---|
| 226 | ); |
---|
| 227 | }else{ |
---|
| 228 | task = getTask(); |
---|
| 229 | task.set('completed', completed); |
---|
| 230 | } |
---|
| 231 | if(!hasReminder.getValue()){ |
---|
| 232 | reminder.setValue(''); |
---|
| 233 | } |
---|
| 234 | form.getForm().updateRecord(task); |
---|
| 235 | } |
---|
| 236 | |
---|
| 237 | function setCompleted(value){ |
---|
| 238 | completed = value; |
---|
| 239 | var cplBtn = Ext.getCmp('cpl-btn'); |
---|
| 240 | if (completed) { |
---|
| 241 | cplBtn.setText('Mark Active'); |
---|
| 242 | cplBtn.setIconClass('icon-mark-active'); |
---|
| 243 | hasReminder.disable(); |
---|
| 244 | reminder.disable(); |
---|
| 245 | } |
---|
| 246 | else { |
---|
| 247 | cplBtn.setText('Mark Complete'); |
---|
| 248 | cplBtn.setIconClass('icon-mark-complete'); |
---|
| 249 | setMsg(null); |
---|
| 250 | hasReminder.enable(); |
---|
| 251 | reminder.setDisabled(!hasReminder.checked); |
---|
| 252 | } |
---|
| 253 | } |
---|
| 254 | |
---|
| 255 | function setMsg(msgText){ |
---|
| 256 | var last; |
---|
| 257 | if(!msgText) { |
---|
| 258 | msg.setDisplayed(false); |
---|
| 259 | } else { |
---|
| 260 | msg.setDisplayed(''); |
---|
| 261 | msg.update(msgText); |
---|
| 262 | } |
---|
| 263 | description.anchorSpec.bottom = function(v){ |
---|
| 264 | if(v !== last){ |
---|
| 265 | last = v; |
---|
| 266 | var h = msg.getHeight(); |
---|
| 267 | return v - 95 - (h ? h + 8 : 0); |
---|
| 268 | } |
---|
| 269 | }; |
---|
| 270 | form.doLayout(); |
---|
| 271 | } |
---|
| 272 | |
---|
| 273 | function validate(){ |
---|
| 274 | if(Ext.isEmpty(title.getValue(), false)){ |
---|
| 275 | Ext.Msg.alert('Warning', 'Unable to save changes. A subject is required.', function(){ |
---|
| 276 | title.focus(); |
---|
| 277 | }); |
---|
| 278 | return false; |
---|
| 279 | } |
---|
| 280 | return true; |
---|
| 281 | } |
---|
| 282 | |
---|
| 283 | function getTask(){ |
---|
| 284 | var t = opener.tx.data.tasks.lookup(taskId); |
---|
| 285 | if(t){ |
---|
| 286 | //workaround WebKit cross-frame date issue |
---|
| 287 | fixDateMember(t.data, 'completedDate'); |
---|
| 288 | fixDateMember(t.data, 'reminder'); |
---|
| 289 | fixDateMember(t.data, 'dueDate'); |
---|
| 290 | } |
---|
| 291 | return t; |
---|
| 292 | } |
---|
| 293 | |
---|
| 294 | }); |
---|
| 295 | |
---|
| 296 | |
---|
| 297 | |
---|