← Back to branch summary

~cdparra/gelee/trunk

« back to all changes in this revision

Viewing changes to webui/ecosystem/workspace/extjs/examples/tasks/tasks.js

  • Committer: parra
  • Date: 2010-03-15 15:56:56 UTC
  • Revision ID: svn-v4:ac5bba68-f036-4e09-846e-8f32731cc928:trunk/gelee:1448
merged gelee at svn

Show diffs side-by-side

added added

removed removed

Lines of Context:
webui/ecosystem/workspace/extjs/examples/tasks/tasks.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.onReady(function(){
 
8
    Ext.QuickTips.init();
 
9
 
 
10
    var xg = Ext.grid;
 
11
    // turn off default shadows which look funky in air
 
12
    xg.GridEditor.prototype.shadow = false;
 
13
    
 
14
    var conn = Ext.data.SqlDB.getInstance();
 
15
        conn.open('tasks.db');
 
16
    
 
17
    // the main grid store
 
18
    var taskStore = new TaskStore(conn);
 
19
    
 
20
    // Category store shared by category combos
 
21
    var catStore = new CategoryStore();
 
22
    
 
23
        taskStore.load({
 
24
                callback: function(){
 
25
                        // first time?
 
26
                        if(taskStore.getCount() < 1){
 
27
                                Ext.Msg.confirm('Create Tasks?', 'Your database is currently empty. Would you like to insert some demo data?', 
 
28
                                        function(btn){
 
29
                                                if(btn == 'yes'){
 
30
                                                        loadDemoTasks(taskStore);       
 
31
                                                }
 
32
                                                catStore.init(taskStore);
 
33
                                        });
 
34
                        }else{
 
35
                                catStore.init(taskStore);
 
36
                        }
 
37
                }
 
38
        });
 
39
 
 
40
    // custom event to notify when a new category is available
 
41
    taskStore.on('newcategory', catStore.addCategory, catStore);
 
42
 
 
43
    // set of event handlers shared by combos to allow them to share
 
44
    // the same local store
 
45
    var comboEvents = {
 
46
        focus: function(){
 
47
            this.bindStore(catStore);
 
48
        },
 
49
        blur: function(c){
 
50
            catStore.purgeListeners();
 
51
        }
 
52
    }
 
53
 
 
54
    var completeColumn = new CompleteColumn();
 
55
 
 
56
    // custom template for the grid header
 
57
    var headerTpl = new Ext.Template(
 
58
        '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">',
 
59
        '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>',
 
60
        '<tbody><tr class="new-task-row">',
 
61
            '<td><div id="new-task-icon"></div></td>',
 
62
            '<td><div class="x-small-editor" id="new-task-title"></div></td>',
 
63
            '<td><div class="x-small-editor" id="new-task-cat"></div></td>',
 
64
            '<td><div class="x-small-editor" id="new-task-due"></div></td>',
 
65
        '</tr></tbody>',
 
66
        "</table>"
 
67
    );
 
68
 
 
69
    var selections = new Ext.grid.RowSelectionModel();
 
70
 
 
71
    // The main grid in all its configuration option glory
 
72
    var grid = new xg.EditorGridPanel({
 
73
        id:'tasks-grid',
 
74
        store: taskStore,
 
75
        sm: selections,
 
76
        clicksToEdit: 'auto',
 
77
        enableColumnHide:false,
 
78
        enableColumnMove:false,
 
79
                border:false,
 
80
                title:'All Tasks',
 
81
                iconCls:'icon-show-all',
 
82
                region:'center',
 
83
                
 
84
        plugins: completeColumn,
 
85
 
 
86
        columns: [
 
87
            completeColumn,
 
88
            {
 
89
                header: "Task",
 
90
                width:400,
 
91
                sortable: true,
 
92
                dataIndex: 'title',
 
93
                id:'task-title',
 
94
                editor: new Ext.form.TextField({
 
95
                    allowBlank: false
 
96
                })
 
97
            },
 
98
            {
 
99
                header: "Category",
 
100
                width:150,
 
101
                sortable: true,
 
102
                dataIndex: 'category',
 
103
                editor: new Ext.form.ComboBox({
 
104
                    displayField: 'text',
 
105
                    triggerAction: 'all',
 
106
                    mode:'local',
 
107
                    selectOnFocus:true,
 
108
                    listClass:'x-combo-list-small',
 
109
                    listeners: comboEvents
 
110
                })
 
111
            },
 
112
            {
 
113
                header: "Due Date",
 
114
                width: 150,
 
115
                sortable: true,
 
116
                renderer: Ext.util.Format.dateRenderer('D m/d/Y'),
 
117
                dataIndex: 'dueDate',
 
118
                groupRenderer: textDate(),
 
119
                groupName: 'Due',
 
120
                editor: new Ext.form.DateField({
 
121
                    format : "m/d/Y"
 
122
                })
 
123
            }
 
124
        ],
 
125
 
 
126
        view: new Ext.grid.GroupingView({
 
127
            forceFit:true,
 
128
            ignoreAdd: true,
 
129
            emptyText: 'No Tasks to display',
 
130
 
 
131
            templates: {
 
132
                header: headerTpl
 
133
            },
 
134
 
 
135
            getRowClass : function(r){
 
136
                var d = r.data;
 
137
                if(d.completed){
 
138
                    return 'task-completed';
 
139
                }
 
140
                if(d.dueDate && d.dueDate.getTime() < new Date().clearTime().getTime()){
 
141
                    return 'task-overdue';
 
142
                }
 
143
                return '';
 
144
            }
 
145
        })
 
146
    });
 
147
 
 
148
    var viewPanel = new Ext.Panel({
 
149
        frame:true,
 
150
        title: 'Views',
 
151
        collapsible:true,
 
152
        contentEl:'task-views',
 
153
        titleCollapse: true
 
154
    });
 
155
    
 
156
    var taskActions = new Ext.Panel({
 
157
        frame:true,
 
158
        title: 'Task Actions',
 
159
        collapsible:true,
 
160
        contentEl:'task-actions',
 
161
        titleCollapse: true
 
162
    });
 
163
    
 
164
    var groupActions = new Ext.Panel({
 
165
        frame:true,
 
166
        title: 'Task Grouping',
 
167
        collapsible:true,
 
168
        contentEl:'task-grouping',
 
169
        titleCollapse: true
 
170
    });
 
171
    
 
172
    var actionPanel = new Ext.Panel({
 
173
        id:'action-panel',
 
174
        region:'west',
 
175
        split:true,
 
176
        collapsible: true,
 
177
        collapseMode: 'mini',
 
178
        width:200,
 
179
        minWidth: 150,
 
180
        border: false,
 
181
        baseCls:'x-plain',
 
182
        items: [taskActions, viewPanel, groupActions]
 
183
    });
 
184
 
 
185
    if(Ext.isAir){ // create AIR window
 
186
        var win = new Ext.air.MainWindow({
 
187
            layout:'border',
 
188
            items: [actionPanel, grid],
 
189
            title: 'Simple Tasks',
 
190
            iconCls: 'icon-show-all'
 
191
        }).render();
 
192
        }else{
 
193
        var viewport = new Ext.Viewport({
 
194
            layout:'border',
 
195
            items: [actionPanel, grid]
 
196
        });
 
197
    }
 
198
 
 
199
    var ab = actionPanel.body;
 
200
    ab.on('mousedown', doAction, null, {delegate:'a'});
 
201
        ab.on('click', Ext.emptyFn, null, {delegate:'a', preventDefault:true});
 
202
 
 
203
    grid.on('resize', syncFields);
 
204
        grid.on('columnresize', syncFields);
 
205
 
 
206
    grid.on('afteredit', function(e){
 
207
        if(e.field == 'category'){
 
208
            catStore.addCategory(e.value);
 
209
        }
 
210
        if(e.field == taskStore.getGroupState()){
 
211
            taskStore.applyGrouping();
 
212
        }
 
213
 
 
214
    });
 
215
 
 
216
    grid.on('keydown', function(e){
 
217
         if(e.getKey() == e.DELETE && !grid.editing){
 
218
             actions['action-delete']();
 
219
         }
 
220
    });
 
221
 
 
222
    selections.on('selectionchange', function(sm){
 
223
        var bd = taskActions.body, c = sm.getCount();
 
224
        bd.select('li:not(#new-task)').setDisplayed(c > 0);
 
225
        bd.select('span.s').setDisplayed(c > 1);
 
226
    });
 
227
 
 
228
    // The fields in the grid's header
 
229
    var ntTitle = new Ext.form.TextField({
 
230
        renderTo: 'new-task-title',
 
231
        emptyText: 'Add a task...'
 
232
    });
 
233
 
 
234
    var ntCat = new Ext.form.ComboBox({
 
235
        renderTo: 'new-task-cat',
 
236
        disabled:true,
 
237
        displayField: 'text',
 
238
        triggerAction: 'all',
 
239
        mode:'local',
 
240
        selectOnFocus:true,
 
241
        listClass:'x-combo-list-small',
 
242
        listeners: comboEvents
 
243
    });
 
244
 
 
245
    var ntDue = new Ext.form.DateField({
 
246
        renderTo: 'new-task-due',
 
247
        value: new Date(),
 
248
        disabled:true,
 
249
        format : "m/d/Y"
 
250
    });
 
251
 
 
252
    // syncs the header fields' widths with the grid column widths
 
253
    function syncFields(){
 
254
        var cm = grid.getColumnModel();
 
255
        ntTitle.setSize(cm.getColumnWidth(1)-2);
 
256
        ntCat.setSize(cm.getColumnWidth(2)-4);
 
257
        ntDue.setSize(cm.getColumnWidth(3)-4);
 
258
    }
 
259
    syncFields();
 
260
 
 
261
    var editing = false, focused = false, userTriggered = false;
 
262
    var handlers = {
 
263
        focus: function(){
 
264
            focused = true;
 
265
        },
 
266
        blur: function(){
 
267
            focused = false;
 
268
            doBlur.defer(250);
 
269
        },
 
270
        specialkey: function(f, e){
 
271
            if(e.getKey()==e.ENTER){
 
272
                userTriggered = true;
 
273
                e.stopEvent();
 
274
                f.el.blur();
 
275
                if(f.triggerBlur){
 
276
                    f.triggerBlur();
 
277
                }
 
278
            }
 
279
        }
 
280
    }
 
281
    ntTitle.on(handlers);
 
282
    ntCat.on(handlers);
 
283
    ntDue.on(handlers);
 
284
 
 
285
    ntTitle.on('focus', function(){
 
286
        focused = true;
 
287
        if(!editing){
 
288
            ntCat.enable();
 
289
            ntDue.enable();
 
290
            syncFields();
 
291
            editing = true;
 
292
        }
 
293
    });
 
294
 
 
295
    // when a field in the add bar is blurred, this determines
 
296
    // whether a new task should be created
 
297
    function doBlur(){
 
298
        if(editing && !focused){
 
299
            var title = ntTitle.getValue();
 
300
            if(!Ext.isEmpty(title)){
 
301
                taskStore.addTask({
 
302
                    taskId: Task.nextId(),
 
303
                    title: title,
 
304
                    dueDate: ntDue.getValue()||'',
 
305
                    description: '', // ???
 
306
                    category: ntCat.getValue(),
 
307
                    completed: false
 
308
                });
 
309
                ntTitle.setValue('');
 
310
                if(userTriggered){ // if the entered to add the task, then go to a new add automatically
 
311
                    userTriggered = false;
 
312
                    ntTitle.focus.defer(100, ntTitle);
 
313
                }
 
314
            }
 
315
            ntCat.disable();
 
316
            ntDue.disable();
 
317
            editing = false;
 
318
        }
 
319
    }
 
320
        
 
321
    var actions = {
 
322
        'view-all' : function(){
 
323
                taskStore.applyFilter('all');
 
324
                grid.setTitle('All Tasks', 'icon-show-all');
 
325
        },
 
326
        
 
327
        'view-active' : function(){
 
328
                taskStore.applyFilter(false);
 
329
                grid.setTitle('Active Tasks', 'icon-show-active');
 
330
        },
 
331
        
 
332
        'view-complete' : function(){
 
333
                taskStore.applyFilter(true);
 
334
                grid.setTitle('Completed Tasks', 'icon-show-complete');
 
335
        },
 
336
        
 
337
        'action-new' : function(){
 
338
                ntTitle.focus();
 
339
        },
 
340
        
 
341
        'action-complete' : function(){
 
342
                selections.each(function(s){
 
343
                        s.set('completed', true);
 
344
                });
 
345
            taskStore.applyFilter();
 
346
        },
 
347
        
 
348
        'action-active' : function(){
 
349
                selections.each(function(s){
 
350
                        s.set('completed', false);
 
351
                });
 
352
            taskStore.applyFilter();
 
353
        },
 
354
        
 
355
        'action-delete' : function(){
 
356
                Ext.Msg.confirm('Confirm', 'Are you sure you want to delete the selected task(s)?', 
 
357
                function(btn){
 
358
                if(btn == 'yes'){
 
359
                        selections.each(function(s){
 
360
                                        taskStore.remove(s);
 
361
                                });
 
362
                }
 
363
            });
 
364
        },
 
365
        
 
366
        'group-date' : function(){
 
367
                taskStore.groupBy('dueDate');
 
368
        },
 
369
        
 
370
        'group-cat' : function(){
 
371
                taskStore.groupBy('category');
 
372
        },
 
373
        
 
374
        'no-group' : function(){
 
375
                taskStore.clearGrouping();
 
376
        }
 
377
    };
 
378
    
 
379
    function doAction(e, t){
 
380
        e.stopEvent();
 
381
        actions[t.id]();
 
382
    }
 
383
    
 
384
    
 
385
    // generates a renderer function to be used for textual date groups
 
386
    function textDate(){
 
387
        // create the cache of ranges to be reused
 
388
        var today = new Date().clearTime(true);
 
389
        var year = today.getFullYear();
 
390
        var todayTime = today.getTime();
 
391
        var yesterday = today.add('d', -1).getTime();
 
392
        var tomorrow = today.add('d', 1).getTime();
 
393
        var weekDays = today.add('d', 6).getTime();
 
394
        var lastWeekDays = today.add('d', -6).getTime();
 
395
 
 
396
        return function(date){
 
397
            if(!date) {
 
398
                return '(No Date)';
 
399
            }
 
400
            var notime = date.clearTime(true).getTime();
 
401
 
 
402
            if (notime == todayTime) {
 
403
                return 'Today';
 
404
            }
 
405
            if(notime > todayTime){
 
406
                if (notime == tomorrow) {
 
407
                    return 'Tomorrow';
 
408
                }
 
409
                if (notime <= weekDays) {
 
410
                    return date.format('l');
 
411
                }
 
412
            }else {
 
413
                if(notime == yesterday) {
 
414
                        return 'Yesterday';
 
415
                    }
 
416
                    if(notime >= lastWeekDays) {
 
417
                        return 'Last ' + date.format('l');
 
418
                    }
 
419
            }            
 
420
            return date.getFullYear() == year ? date.format('D m/d') : date.format('D m/d/Y');
 
421
       }
 
422
    }
 
423
});
 
424
 
 
425
/* This is used to laod some demo tasks if the task database is empty */
 
426
function loadDemoTasks(store){
 
427
        var s = new Date();
 
428
        // hardcoded demo tasks
 
429
        store.addTask({taskId: Task.nextId(), title:'Start documentation of Ext 2.0', category:'Ext', description:'', dueDate: s.add('d', 21), completed: false});
 
430
        store.addTask({taskId: Task.nextId(), title:'Release Ext 1.l Beta 2', category:'Ext', description:'', dueDate:s.add('d', 2), completed: false});
 
431
        store.addTask({taskId: Task.nextId(), title:'Take wife to see movie', category:'Family', description:'', dueDate:s.add('d', 2), completed: false});
 
432
        store.addTask({taskId: Task.nextId(), title:'Finish task list demo app', category:'Ext', description:'', dueDate:s.add('d', 2), completed: false});
 
433
        store.addTask({taskId: Task.nextId(), title:'Do something other than work', category:'Family', description:'', dueDate:s.add('d', -1), completed: false});
 
434
        store.addTask({taskId: Task.nextId(), title:'Go to the grocery store', category:'Family', description:'', dueDate:s.add('d', -1), completed: true});
 
435
        store.addTask({taskId: Task.nextId(), title:'Reboot my computer', category:'Misc', description:'', dueDate:s, completed: false});
 
436
        store.addTask({taskId: Task.nextId(), title:'Respond to emails', category:'Ext', description:'', dueDate:s, completed: true});
 
437
}
 
438
 
 
439
    
 
440