examples/tasks/classes.js

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