source: trunk/web/addons/job_monarch/lib/extjs/examples/tasks/tasks.js @ 619

Last change on this file since 619 was 619, checked in by ramonb, 15 years ago

lib/:

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