ReminderColumn.js
3.72 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
* @class SimpleTasks.ux.ReminderColumn
* @extends Ext.grid.column.Column
* A grid column for selecting reminder times
*/
Ext.define('SimpleTasks.ux.ReminderColumn', {
extend: 'Ext.grid.column.Column',
xtype: 'remindercolumn',
config: {
/**
* @cfg {String} menuPosition
* Positing to show the menu relative to the reminder icon.
* Alignment position as used by Ext.Element.getAlignToXY
* Defaults to 'tl-bl'
*/
menuPosition: 'tl-bl'
},
tdCls: Ext.baseCSSPrefix + 'grid-cell-remindercolumn',
constructor: function() {
this.addEvents(
/**
* @event select
* Fires when a reminder time is selected from the dropdown menu
* @param {Ext.data.Model} record The underlying record of the row that was clicked to show the reminder menu
* @param {String|Number} value The value that was selected
*/
'select'
);
this.callParent(arguments);
},
/**
* initializes the dropdown menu
* @private
*/
initMenu: function() {
var me = this,
items = [];
function createItem(text, value) {
return {
text: text,
listeners: {
click: Ext.bind(me.handleMenuItemClick, me, [value], true)
}
}
}
items.push(createItem('No Reminder'));
items.push({xtype: 'menuseparator'});
items.push(createItem('1 day before', 1));
items.push(createItem('2 days before', 2));
items.push(createItem('3 days before', 3));
items.push(createItem('1 week before', 7));
items.push(createItem('2 weeks before', 14));
items.push(createItem('Set Default Time...', 'set'));
me.menu = Ext.create('Ext.menu.Menu', {
plain: true,
items: items
});
},
/**
* Handles a click on a menu item
* @private
* @param {Ext.menu.Item} menuItem
* @param {Ext.EventObject} e
* @param {Object} options
* @param {String|Number} value
*/
handleMenuItemClick: function(menuItem, options, e, value) {
this.fireEvent('select', this.record, value);
},
/**
* Process and refire events routed from the GridView's processEvent method.
* @private
*/
processEvent: function(type, view, cell, rowIndex, colIndex, e) {
var me = this,
cssPrefix = Ext.baseCSSPrefix,
target = Ext.get(e.getTarget());
if (target.hasCls(cssPrefix + 'grid-reminder')) {
if(type === 'click') {
if(!me.menu) {
me.initMenu();
}
me.record = view.store.getAt(rowIndex);
me.menu.showBy(target, me.menuPosition);
}
} else {
return me.callParent(arguments);
}
},
/**
* Renderer for the reminder column
* @private
* @param {Number} value
* @param {Object} metaData
* @param {SimpleTasks.model.Task} task
* @param {Number} rowIndex
* @param {Number} colIndex
* @param {SimpleTasks.store.Tasks} store
* @param {Ext.grid.View} view
*/
renderer : function(value, metaData, task, rowIndex, colIndex, store, view){
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-reminder'];
if(task.get('done') || !task.get('due')) {
// if the task is done or has no due date, a reminder cannot be set
return '';
}
if (!value) {
cls.push(cssPrefix + 'grid-reminder-empty');
}
return '<div class="' + cls.join(' ') + '"></div>';
}
});