Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / task.html
diff --git a/docs/source/task.html b/docs/source/task.html
new file mode 100644 (file)
index 0000000..e121014
--- /dev/null
@@ -0,0 +1,299 @@
+<html>\r
+<head>\r
+  <title>The source code</title>\r
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body  onload="prettyPrint();">\r
+    <pre class="prettyprint lang-js">\r
+Ext.onReady(function(){\r
+    Ext.QuickTips.init();\r
+       \r
+       var win = window.nativeWindow;\r
+       \r
+       var opener = Ext.air.NativeWindow.getRootHtmlWindow();\r
+       var taskId = String(window.location).split('=')[1];\r
+       var isNew = !taskId;\r
+       var completed = false;\r
+       \r
+       win.title = 'Task - ' + Ext.util.Format.ellipsis(getTask().data.title, 40);\r
+       \r
+       var tb = new Ext.Toolbar({\r
+               region: 'north',\r
+               height:26,\r
+               id:'main-tb',\r
+               items:[{\r
+                       id:'cpl-btn', \r
+                       iconCls: 'icon-mark-complete', \r
+                       text: 'Mark Complete',\r
+                       handler: function(){\r
+                               setCompleted(!completed);\r
+                               if(completed) {\r
+                                       setMsg('This task was completed on ' + new Date().format('l, F d, Y'));\r
+                               }\r
+                               if(validate()) {\r
+                                       (function(){\r
+                                               saveData();\r
+                                               if (completed) {\r
+                                                       win.close();\r
+                                               }\r
+                                       }).defer(250);\r
+                               }\r
+                       }\r
+               },'-',\r
+                       {iconCls: 'icon-delete-task', text: 'Delete', handler: function(){\r
+                               Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task?', function(btn){\r
+                                       if(btn == 'yes'){\r
+                                               opener.tx.data.tasks.remove(getTask());\r
+                                               win.close();\r
+                                       }\r
+                               });\r
+                       }}\r
+               ]\r
+       });\r
+       \r
+       var title = new Ext.form.TextField({\r
+               fieldLabel: 'Task Subject',\r
+        name: 'title',\r
+        anchor: '100%'\r
+    });\r
+               \r
+       var dueDate = new Ext.form.DateField({\r
+               fieldLabel: 'Due Date',\r
+               name: 'dueDate',\r
+               width: 135,\r
+               format: 'm/d/Y'\r
+       });\r
+       \r
+       var list = new ListSelector({\r
+        fieldLabel: 'Task List',\r
+               name: 'listId',\r
+               store: opener.tx.data.lists,\r
+               anchor: '100%'\r
+    });\r
+       \r
+       list.on('render', function(){\r
+               this.menu.on('beforeshow', function(m){\r
+                       list.tree.setWidth(Math.max(180, list.getSize().width));\r
+               });\r
+       });\r
+       win.addEventListener('closing', function(){\r
+               opener.tx.data.lists.unbindTree(list.tree);\r
+       });\r
+       \r
+       \r
+       var hasReminder = new Ext.form.Checkbox({\r
+               boxLabel: 'Reminder:',\r
+               checked: false\r
+       });\r
+       \r
+       var reminder = new Ext.ux.form.DateTime({\r
+               name: 'reminder',\r
+               disabled: true,\r
+               timeFormat: 'g:i A',\r
+               dateFormat: 'm/d/Y',\r
+               timeConfig: {\r
+                       tpl: opener.Templates.timeField,\r
+                       listClass:'x-combo-list-small',\r
+                       maxHeight:100\r
+               }\r
+       });\r
+       \r
+       var description = new Ext.form.HtmlEditor({\r
+        hideLabel: true,\r
+        name: 'description',\r
+        anchor: '100% -95',  // anchor width by percentage and height by raw adjustment\r
+        onEditorEvent : function(e){\r
+               var t;\r
+               if(e.browserEvent.type == 'mousedown' && (t = e.getTarget('a', 3))){\r
+                   t.target = '_blank';\r
+               }\r
+               this.updateToolbar();\r
+           }\r
+    });\r
+       \r
+       var form = new Ext.form.FormPanel({\r
+               region:'center',\r
+        baseCls: 'x-plain',\r
+        labelWidth: 75,\r
+        margins:'10 10 5 10',\r
+               \r
+               buttonAlign: 'right',\r
+               minButtonWidth: 80,\r
+               buttons:[{\r
+                       text: 'OK',\r
+                       handler: function(){\r
+                               if(validate()) {\r
+                                       saveData();\r
+                                       window.nativeWindow.close();\r
+                               }\r
+                       }\r
+               },{\r
+                       text: 'Cancel',\r
+                       handler: function(){ window.nativeWindow.close(); }\r
+               }],\r
+                               \r
+               \r
+        items: [{\r
+                       xtype:'box',\r
+                       autoEl: {id:'msg'}\r
+               },\r
+               title,{\r
+                       layout: 'column',\r
+                       anchor: '100%',\r
+                       baseCls: 'x-plain',\r
+                       items: [{\r
+                               width: 250,\r
+                               layout: 'form',\r
+                               baseCls: 'x-plain',\r
+                               items: dueDate\r
+                       }, {\r
+                               columnWidth: 1,\r
+                               layout: 'form',\r
+                               baseCls: 'x-plain',\r
+                               labelWidth:55,\r
+                               items: list\r
+                       }]\r
+               },{\r
+                       xtype:'box',\r
+                       autoEl: {cls:'divider'}\r
+               },{\r
+                       layout: 'column',\r
+                       anchor: '100%',\r
+                       baseCls: 'x-plain',\r
+                       items: [{\r
+                               width: 80,\r
+                               layout: 'form',\r
+                               baseCls: 'x-plain',\r
+                               hideLabels: true,\r
+                               items: hasReminder\r
+                       }, {\r
+                               columnWidth: 1,\r
+                               layout: 'form',\r
+                               baseCls: 'x-plain',\r
+                               hideLabels: true,\r
+                               items: reminder\r
+                       }]\r
+               }, \r
+               description]\r
+    });\r
+       \r
+       var viewport = new Ext.Viewport({\r
+               layout:'border',\r
+               items:[tb, form]\r
+       });\r
+       \r
+       var msg = Ext.get('msg');\r
+       var task = getTask();\r
+       \r
+       if(task && task.data.completedDate){\r
+               setMsg('This task was completed on ' + task.data.completedDate.format('l, F d, Y'));\r
+       }       \r
+       \r
+       hasReminder.on('check', function(cb, checked){\r
+               reminder.setDisabled(!checked);\r
+               if(checked && !reminder.getValue()){\r
+                       reminder.setValue(opener.tx.data.getDefaultReminder(getTask()));\r
+               }\r
+       });\r
+       \r
+       refreshData.defer(10);\r
+\r
+       win.visible = true;\r
+       win.activate();\r
+       \r
+       title.focus();\r
+               \r
+       function refreshData(){\r
+               if(!isNew){\r
+                       var task = getTask();\r
+                       hasReminder.setValue(!!task.data.reminder);\r
+                       form.getForm().loadRecord(task);\r
+                       setCompleted(task.data.completed);\r
+               }\r
+       }\r
+       \r
+       function saveData(){\r
+               var task;\r
+               if(isNew){\r
+                       task = opener.tx.data.tasks.createTask(\r
+                               title.getValue(), \r
+                               list.getRawValue(), \r
+                               dueDate.getValue(), \r
+                               description.getValue(),\r
+                               completed\r
+                       );\r
+               }else{\r
+                       task = getTask();\r
+                       task.set('completed', completed);\r
+               }\r
+               if(!hasReminder.getValue()){\r
+                       reminder.setValue('');\r
+               }\r
+               form.getForm().updateRecord(task);\r
+       }\r
+       \r
+       function setCompleted(value){\r
+               completed = value;\r
+               var cplBtn = Ext.getCmp('cpl-btn');\r
+               if (completed) {\r
+                       cplBtn.setText('Mark Active');\r
+                       cplBtn.setIconClass('icon-mark-active');\r
+                       hasReminder.disable();\r
+                       reminder.disable();\r
+               }\r
+               else {\r
+                       cplBtn.setText('Mark Complete');\r
+                       cplBtn.setIconClass('icon-mark-complete');\r
+                       setMsg(null);\r
+                       hasReminder.enable();\r
+                       reminder.setDisabled(!hasReminder.checked);\r
+               }\r
+       }\r
+       \r
+       function setMsg(msgText){\r
+               var last;\r
+               if(!msgText) {\r
+                       msg.setDisplayed(false);\r
+               } else {\r
+                       msg.setDisplayed('');\r
+                       msg.update(msgText);\r
+               }\r
+               description.anchorSpec.bottom = function(v){\r
+            if(v !== last){\r
+                last = v;\r
+                               var h = msg.getHeight();\r
+                return v - 95 - (h ? h + 8 : 0);\r
+            }\r
+        };\r
+               form.doLayout();\r
+       }\r
+       \r
+       function validate(){\r
+               if(Ext.isEmpty(title.getValue(), false)){\r
+                       Ext.Msg.alert('Warning', 'Unable to save changes. A subject is required.', function(){\r
+                               title.focus();\r
+                       });\r
+                       return false;\r
+               }\r
+               return true;\r
+       }\r
+       \r
+       function getTask(){\r
+               var t = opener.tx.data.tasks.lookup(taskId);\r
+               if(t){\r
+                       //workaround WebKit cross-frame date issue\r
+                       fixDateMember(t.data, 'completedDate');\r
+                       fixDateMember(t.data, 'reminder');\r
+                       fixDateMember(t.data, 'dueDate');\r
+               }\r
+               return t;\r
+       }\r
+       \r
+});\r
+\r
+    \r
+\r
+</pre>    \r
+</body>\r
+</html>
\ No newline at end of file