examples/tasks/classes.js

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