air/samples/tasks/task.js

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