examples/tasks/classes.js

   1 /*\r
   2  * Ext JS Library 2.2.1\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 Ext.BLANK_IMAGE_URL = 'images/s.gif';\r
  10     \r
  11 Task = Ext.data.Record.create([\r
  12     {name: 'taskId', type:'string'},\r
  13     {name: 'title', type:'string'},\r
  14     {name: 'category', type:'string'},\r
  15     {name: 'description', type:'string'},\r
  16     {name: 'dueDate', type:'date', dateFormat: 'Y-m-d H:i:s'},\r
  17     {name: 'completed', type:'boolean'}\r
  18 ]);\r
  19 \r
  20 Task.nextId = function(){\r
  21         // if the time isn't unique enough, the addition \r
  22         // of random chars should be\r
  23         var t = String(new Date().getTime()).substr(4);\r
  24         var s = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\r
  25         for(var i = 0; i < 4; i++){\r
  26                 t += s.charAt(Math.floor(Math.random()*26));\r
  27         }\r
  28         return t;\r
  29 }\r
  30 \r
  31 // The main grid's store\r
  32 TaskStore = function(conn){\r
  33         TaskStore.superclass.constructor.call(this, {\r
  34         sortInfo:{field: 'dueDate', direction: "ASC"},\r
  35         groupField:'dueDate',\r
  36         taskFilter: 'all',\r
  37         reader: new Ext.data.JsonReader({\r
  38             idProperty: 'taskId'\r
  39         }, Task)\r
  40     });\r
  41 \r
  42     this.proxy = new Ext.data.SqlDB.Proxy(conn, 'task', 'taskId', this);\r
  43 \r
  44     if(window.google){ // google needs the table created\r
  45         this.proxy.on('beforeload', this.prepareTable, conn);\r
  46     }\r
  47 \r
  48     this.addEvents({newcategory: true});\r
  49 };\r
  50 \r
  51 Ext.extend(TaskStore, Ext.data.GroupingStore, {\r
  52     applyFilter : function(filter){\r
  53         if(filter !== undefined){\r
  54                 this.taskFilter = filter;\r
  55         }\r
  56         var value = this.taskFilter;\r
  57         if(value == 'all'){\r
  58             return this.clearFilter();\r
  59         }\r
  60         return this.filterBy(function(item){\r
  61             return item.data.completed === value;\r
  62         });\r
  63     },\r
  64 \r
  65     addTask : function(data){\r
  66         this.suspendEvents();\r
  67         this.clearFilter();\r
  68         this.resumeEvents();\r
  69         this.loadData([data], true);\r
  70         this.suspendEvents();\r
  71         this.applyFilter();\r
  72         this.applyGrouping(true);\r
  73         this.resumeEvents();\r
  74         this.fireEvent('datachanged', this);\r
  75         this.fireEvent('newcategory', data.category);\r
  76     },\r
  77 \r
  78     prepareTable : function(){\r
  79         try{\r
  80         this.createTable({\r
  81             name: 'task',\r
  82             key: 'taskId',\r
  83             fields: Task.prototype.fields\r
  84         });\r
  85         }catch(e){console.log(e)}\r
  86     }\r
  87 });\r
  88 \r
  89 // The store for Categories\r
  90 CategoryStore = function(){\r
  91     CategoryStore.superclass.constructor.call(this, {\r
  92         expandData: true,\r
  93         data: [],\r
  94         fields:[{name: 'text', type:'string'}],\r
  95         sortInfo:{field:'text', direction:'ASC'},\r
  96         id: 0\r
  97     });\r
  98 }\r
  99 \r
 100 Ext.extend(CategoryStore, Ext.data.SimpleStore, {\r
 101     init : function(store){\r
 102         var cats = store.collect('category', false, true);\r
 103         this.loadData(cats);\r
 104     },\r
 105 \r
 106     addCategory : function(cat){\r
 107         if(cat && this.indexOfId(cat) === -1){\r
 108             this.clearFilter(true);\r
 109             this.loadData([cat], true);\r
 110             this.applySort();\r
 111         }\r
 112     }\r
 113 });\r
 114 \r
 115 // Grid column plugin that does the complete/active button in the left-most column\r
 116 CompleteColumn = function(){\r
 117     var grid;\r
 118 \r
 119     function getRecord(t){\r
 120         var index = grid.getView().findRowIndex(t);\r
 121         return grid.store.getAt(index);\r
 122     }\r
 123 \r
 124     function onMouseDown(e, t){\r
 125         if(Ext.fly(t).hasClass('task-check')){\r
 126             e.stopEvent();\r
 127             var record = getRecord(t);\r
 128             record.set('completed', !record.data.completed);\r
 129             grid.store.applyFilter();\r
 130         }\r
 131     }\r
 132 \r
 133     function onMouseOver(e, t){\r
 134         if(Ext.fly(t).hasClass('task-check')){\r
 135             Ext.fly(t.parentNode).addClass('task-check-over');\r
 136         }\r
 137     }\r
 138 \r
 139     function onMouseOut(e, t){\r
 140         if(Ext.fly(t).hasClass('task-check')){\r
 141             Ext.fly(t.parentNode).removeClass('task-check-over');\r
 142         }\r
 143     }\r
 144 \r
 145     Ext.apply(this, {\r
 146         width: 22,\r
 147         header: '<div class="task-col-hd"></div>',\r
 148         menuDisabled:true,\r
 149         fixed: true,\r
 150         id: 'task-col',\r
 151         renderer: function(){\r
 152             return '<div class="task-check"></div>';\r
 153         },\r
 154         init : function(xg){\r
 155             grid = xg;\r
 156             grid.on('render', function(){\r
 157                 var view = grid.getView();\r
 158                 view.mainBody.on('mousedown', onMouseDown);\r
 159                 view.mainBody.on('mouseover', onMouseOver);\r
 160                 view.mainBody.on('mouseout', onMouseOut);\r
 161             });\r
 162         }\r
 163     });\r
 164 };