docs/source/task.html

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