source: trunk/web/addons/job_monarch/lib/extjs-30/examples/tasks/tasks.js @ 647

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

lib/extjs-30:

  • new ExtJS 3.0
File size: 13.3 KB
Line 
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 */
7Ext.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 */
426function 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
Note: See TracBrowser for help on using the repository browser.