docs/source/TaskGrid.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">TaskGrid = function(){\r
   9         \r
  10         // custom columns\r
  11         var completeColumn = new CompleteColumn();\r
  12         var reminderColumn = new ReminderColumn();\r
  13         \r
  14         TaskGrid.superclass.constructor.call(this, {\r
  15                 id:'tasks-grid',\r
  16         store: tx.data.tasks,\r
  17         sm: new Ext.grid.RowSelectionModel({moveEditorOnEnter: false}),\r
  18         clicksToEdit: 'auto',\r
  19         enableColumnHide:false,\r
  20         enableColumnMove:false,\r
  21                 autoEncode: true,\r
  22         title:'All Tasks',\r
  23         iconCls:'icon-folder',\r
  24         region:'center',\r
  25         plugins: [completeColumn, reminderColumn],\r
  26                 margins:'3 3 3 0',\r
  27         columns: [\r
  28             completeColumn,\r
  29             {\r
  30                 header: "Task",\r
  31                 width:400,\r
  32                 sortable: true,\r
  33                 dataIndex: 'title',\r
  34                 id:'task-title',\r
  35                 editor: new Ext.form.TextField({\r
  36                     allowBlank: false\r
  37                 })\r
  38             },\r
  39             {\r
  40                 header: "List",\r
  41                 width:150,\r
  42                 sortable: true,\r
  43                 dataIndex: 'listId',\r
  44                 editor: new ListSelector({\r
  45                                 store:tx.data.lists\r
  46                             }),\r
  47                                 renderer : function(v){\r
  48                                         return tx.data.lists.getName(v);\r
  49                                 }\r
  50             },\r
  51             {\r
  52                                 id:'dueDate',\r
  53                 header: "Due Date",\r
  54                 width: 150,\r
  55                 sortable: true,\r
  56                 renderer: Ext.util.Format.dateRenderer('D m/d/Y'),\r
  57                 dataIndex: 'dueDate',\r
  58                 groupRenderer: Ext.util.Format.createTextDateRenderer(),\r
  59                 groupName: 'Due',\r
  60                 editor: new Ext.form.DateField({\r
  61                     format : "m/d/Y"\r
  62                 })\r
  63             },\r
  64                         reminderColumn\r
  65         ],\r
  66 \r
  67         view: new TaskView()\r
  68         });\r
  69         \r
  70         // Keep the visible date groups in the grid accurate\r
  71         Ext.TaskMgr.start({\r
  72                 run: function(){\r
  73                         var col = this.getColumnModel().getColumnById('dueDate');\r
  74                         if(col.groupRenderer.date.getTime() != new Date().clearTime().getTime()){\r
  75                                 col.groupRenderer = Ext.util.Format.createTextDateRenderer();\r
  76                                 tx.data.tasks.applyGrouping();\r
  77                         }\r
  78                 },\r
  79                 interval: 60000,\r
  80                 scope: this\r
  81         });\r
  82         \r
  83         this.on('rowcontextmenu', this.onRowContext, this);\r
  84 };\r
  85 \r
  86 Ext.extend(TaskGrid, Ext.grid.EditorGridPanel, {\r
  87         onCellDblClick: function(g, row){\r
  88                 clearTimeout(this.autoEditTimer); // allow dbl click without starting edit\r
  89                 var id = this.store.getAt(row).id;\r
  90                 \r
  91                 Ext.air.NativeWindowManager.getTaskWindow(id);\r
  92         },\r
  93 \r
  94     // private\r
  95     onAutoEditClick : function(e, t){\r
  96                 clearTimeout(this.autoEditTimer);\r
  97         if(e.button !== 0){\r
  98             return;\r
  99         }\r
 100         var row = this.view.findRowIndex(t);\r
 101         var col = this.view.findCellIndex(t);\r
 102         if(row !== false && col !== false){\r
 103                 if(this.selModel.isSelected(row) && this.selModel.getCount() === 1){\r
 104                                 this.autoEditTimer = this.startEditing.defer(300, this, [row, col]);\r
 105             }\r
 106         }\r
 107     },\r
 108         \r
 109         onRowContext : function(grid, row, e){\r
 110         if(!this.menu){ // create context menu on first right click\r
 111             this.menu = new Ext.menu.Menu({\r
 112                 id:'tasks-ctx',\r
 113                                 listWidth: 200,\r
 114                 items: [{\r
 115                     text:'Open',\r
 116                     scope: this,\r
 117                     handler:function(){\r
 118                                                 Ext.each(this.selModel.getSelections(), function(r){\r
 119                                                         Ext.air.NativeWindowManager.getTaskWindow(r.id);\r
 120                                                 });\r
 121                     }\r
 122                 },'-',\r
 123                                         tx.actions.complete,\r
 124                                         tx.actions.deleteTask\r
 125                 ]\r
 126             });\r
 127         }\r
 128                 if(!this.selModel.isSelected(row)){\r
 129                         this.selModel.selectRow(row);\r
 130                 }\r
 131                 \r
 132                 this.menu.showAt(e.getXY());\r
 133     }\r
 134 })\r
 135 \r
 136 \r
 137 TaskView = Ext.extend(Ext.grid.GroupingView, {\r
 138         forceFit:true,\r
 139     ignoreAdd: true,\r
 140     emptyText: 'There are no tasks to show in this list.',\r
 141 \r
 142     templates: {\r
 143         header: Templates.gridHeader\r
 144     },\r
 145     getRowClass : function(r){\r
 146         var d = r.data;\r
 147         if(d.completed){\r
 148             return 'task-completed';\r
 149         }\r
 150         if(d.dueDate && d.dueDate.getTime() < new Date().clearTime().getTime()){\r
 151             return 'task-overdue';\r
 152         }\r
 153         return '';\r
 154     }\r
 155 });\r
 156 \r
 157 \r
 158 TaskHeader = function(grid){\r
 159         grid.on('resize', syncFields);\r
 160         grid.on('columnresize', syncFields);\r
 161                 \r
 162     // The fields in the grid's header\r
 163     var ntTitle = this.ntTitle = new Ext.form.TextField({\r
 164         renderTo: 'new-task-title',\r
 165         emptyText: 'Add a task...'\r
 166     });\r
 167 \r
 168     var ntCat = new ListSelector({\r
 169         renderTo: 'new-task-cat',\r
 170         disabled:true,\r
 171         store:tx.data.lists,\r
 172                 listenForLoad: true\r
 173     });\r
 174 \r
 175     var ntDue = new Ext.form.DateField({\r
 176         renderTo: 'new-task-due',\r
 177         value: new Date(),\r
 178         disabled:true,\r
 179         format : "m/d/Y"\r
 180     });\r
 181 \r
 182     // syncs the header fields' widths with the grid column widths\r
 183     function syncFields(){\r
 184         var cm = grid.getColumnModel();\r
 185         ntTitle.setSize(cm.getColumnWidth(1)-2);\r
 186         ntCat.setSize(cm.getColumnWidth(2)-4);\r
 187         ntDue.setSize(cm.getColumnWidth(3)-4);\r
 188     }\r
 189     syncFields();\r
 190 \r
 191     var editing = false, focused = false, userTriggered = false;\r
 192     var handlers = {\r
 193         focus: function(){\r
 194             setFocus.defer(20, window, [true]);\r
 195         },\r
 196         blur: function(){\r
 197             focused = false;\r
 198             doBlur.defer(250);\r
 199         },\r
 200         specialkey: function(f, e){\r
 201             if(e.getKey()==e.ENTER && (!f.isExpanded || !f.isExpanded())){\r
 202                 userTriggered = true;\r
 203                 e.stopEvent();\r
 204                 f.el.blur();\r
 205                 if(f.triggerBlur){\r
 206                     f.triggerBlur();\r
 207                 }\r
 208             }\r
 209         }\r
 210     }\r
 211     ntTitle.on(handlers);\r
 212     ntCat.on(handlers);\r
 213     ntDue.on(handlers);\r
 214 \r
 215     ntTitle.on('focus', function(){\r
 216         focused = true;\r
 217         if(!editing){\r
 218             ntCat.enable();\r
 219             ntDue.enable();\r
 220             syncFields();\r
 221             editing = true;\r
 222                         \r
 223                         ntCat.setValue(tx.data.getActiveListId());\r
 224         }\r
 225     });\r
 226 \r
 227     function setFocus(v){\r
 228                 focused = v;\r
 229         }\r
 230     // when a field in the add bar is blurred, this determines\r
 231     // whether a new task should be created\r
 232     function doBlur(){\r
 233         if(editing && !focused){\r
 234                         var title = ntTitle.getValue();\r
 235             if(!Ext.isEmpty(title)){\r
 236                                 tx.data.tasks.createTask(title, ntCat.getRawValue(), ntDue.getValue());\r
 237                 ntTitle.setValue('');\r
 238                 if(userTriggered){ // if they entered to add the task, then go to a new add automatically\r
 239                     userTriggered = false;\r
 240                     ntTitle.focus.defer(100, ntTitle);\r
 241                 }\r
 242             }\r
 243             ntCat.disable();\r
 244             ntDue.disable();\r
 245             editing = false;\r
 246         }\r
 247     }\r
 248 };\r
 249 </pre>    \r
 250 </body>\r
 251 </html>