1 | /* |
---|
2 | * Ext JS Library 0.30 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | |
---|
10 | Ext.onReady(function(){ |
---|
11 | Ext.QuickTips.init(); |
---|
12 | |
---|
13 | var win = window.nativeWindow; |
---|
14 | |
---|
15 | var opener = Ext.air.NativeWindow.getRootHtmlWindow(); |
---|
16 | var taskId = String(window.location).split('=')[1]; |
---|
17 | var isNew = !taskId; |
---|
18 | var completed = false; |
---|
19 | |
---|
20 | win.title = 'Task - ' + Ext.util.Format.ellipsis(getTask().data.title, 40); |
---|
21 | |
---|
22 | var tb = new Ext.Toolbar({ |
---|
23 | region: 'north', |
---|
24 | height:26, |
---|
25 | id:'main-tb', |
---|
26 | items:[{ |
---|
27 | id:'cpl-btn', |
---|
28 | iconCls: 'icon-mark-complete', |
---|
29 | text: 'Mark Complete', |
---|
30 | handler: function(){ |
---|
31 | setCompleted(!completed); |
---|
32 | if(completed) { |
---|
33 | setMsg('This task was completed on ' + new Date().format('l, F d, Y')); |
---|
34 | } |
---|
35 | if(validate()) { |
---|
36 | (function(){ |
---|
37 | saveData(); |
---|
38 | if (completed) { |
---|
39 | win.close(); |
---|
40 | } |
---|
41 | }).defer(250); |
---|
42 | } |
---|
43 | } |
---|
44 | },'-', |
---|
45 | {iconCls: 'icon-delete-task', text: 'Delete', handler: function(){ |
---|
46 | Ext.Msg.confirm('Confirm Delete', 'Are you sure you want to delete this task?', function(btn){ |
---|
47 | if(btn == 'yes'){ |
---|
48 | opener.tx.data.tasks.remove(getTask()); |
---|
49 | win.close(); |
---|
50 | } |
---|
51 | }); |
---|
52 | }} |
---|
53 | ] |
---|
54 | }); |
---|
55 | |
---|
56 | var title = new Ext.form.TextField({ |
---|
57 | fieldLabel: 'Task Subject', |
---|
58 | name: 'title', |
---|
59 | anchor: '100%' |
---|
60 | }); |
---|
61 | |
---|
62 | var dueDate = new Ext.form.DateField({ |
---|
63 | fieldLabel: 'Due Date', |
---|
64 | name: 'dueDate', |
---|
65 | width: 135, |
---|
66 | format: 'm/d/Y' |
---|
67 | }); |
---|
68 | |
---|
69 | var list = new ListSelector({ |
---|
70 | fieldLabel: 'Task List', |
---|
71 | name: 'listId', |
---|
72 | store: opener.tx.data.lists, |
---|
73 | anchor: '100%' |
---|
74 | }); |
---|
75 | |
---|
76 | list.on('render', function(){ |
---|
77 | this.menu.on('beforeshow', function(m){ |
---|
78 | list.tree.setWidth(Math.max(180, list.getSize().width)); |
---|
79 | }); |
---|
80 | }); |
---|
81 | win.addEventListener('closing', function(){ |
---|
82 | opener.tx.data.lists.unbindTree(list.tree); |
---|
83 | }); |
---|
84 | |
---|
85 | |
---|
86 | var hasReminder = new Ext.form.Checkbox({ |
---|
87 | boxLabel: 'Reminder:', |
---|
88 | checked: false |
---|
89 | }); |
---|
90 | |
---|
91 | var reminder = new Ext.ux.form.DateTime({ |
---|
92 | name: 'reminder', |
---|
93 | disabled: true, |
---|
94 | timeFormat: 'g:i A', |
---|
95 | dateFormat: 'm/d/Y', |
---|
96 | timeConfig: { |
---|
97 | tpl: opener.Templates.timeField, |
---|
98 | listClass:'x-combo-list-small', |
---|
99 | maxHeight:100 |
---|
100 | } |
---|
101 | }); |
---|
102 | |
---|
103 | var description = new Ext.form.HtmlEditor({ |
---|
104 | hideLabel: true, |
---|
105 | name: 'description', |
---|
106 | anchor: '100% -95', // anchor width by percentage and height by raw adjustment |
---|
107 | onEditorEvent : function(e){ |
---|
108 | var t; |
---|
109 | if(e.browserEvent.type == 'mousedown' && (t = e.getTarget('a', 3))){ |
---|
110 | t.target = '_blank'; |
---|
111 | } |
---|
112 | this.updateToolbar(); |
---|
113 | } |
---|
114 | }); |
---|
115 | |
---|
116 | var form = new Ext.form.FormPanel({ |
---|
117 | region:'center', |
---|
118 | baseCls: 'x-plain', |
---|
119 | labelWidth: 75, |
---|
120 | margins:'10 10 5 10', |
---|
121 | |
---|
122 | buttonAlign: 'right', |
---|
123 | minButtonWidth: 80, |
---|
124 | buttons:[{ |
---|
125 | text: 'OK', |
---|
126 | handler: function(){ |
---|
127 | if(validate()) { |
---|
128 | saveData(); |
---|
129 | window.nativeWindow.close(); |
---|
130 | } |
---|
131 | } |
---|
132 | },{ |
---|
133 | text: 'Cancel', |
---|
134 | handler: function(){ window.nativeWindow.close(); } |
---|
135 | }], |
---|
136 | |
---|
137 | |
---|
138 | items: [{ |
---|
139 | xtype:'box', |
---|
140 | autoEl: {id:'msg'} |
---|
141 | }, |
---|
142 | title,{ |
---|
143 | layout: 'column', |
---|
144 | anchor: '100%', |
---|
145 | baseCls: 'x-plain', |
---|
146 | items: [{ |
---|
147 | width: 250, |
---|
148 | layout: 'form', |
---|
149 | baseCls: 'x-plain', |
---|
150 | items: dueDate |
---|
151 | }, { |
---|
152 | columnWidth: 1, |
---|
153 | layout: 'form', |
---|
154 | baseCls: 'x-plain', |
---|
155 | labelWidth:55, |
---|
156 | items: list |
---|
157 | }] |
---|
158 | },{ |
---|
159 | xtype:'box', |
---|
160 | autoEl: {cls:'divider'} |
---|
161 | },{ |
---|
162 | layout: 'column', |
---|
163 | anchor: '100%', |
---|
164 | baseCls: 'x-plain', |
---|
165 | items: [{ |
---|
166 | width: 80, |
---|
167 | layout: 'form', |
---|
168 | baseCls: 'x-plain', |
---|
169 | hideLabels: true, |
---|
170 | items: hasReminder |
---|
171 | }, { |
---|
172 | columnWidth: 1, |
---|
173 | layout: 'form', |
---|
174 | baseCls: 'x-plain', |
---|
175 | hideLabels: true, |
---|
176 | items: reminder |
---|
177 | }] |
---|
178 | }, |
---|
179 | description] |
---|
180 | }); |
---|
181 | |
---|
182 | var viewport = new Ext.Viewport({ |
---|
183 | layout:'border', |
---|
184 | items:[tb, form] |
---|
185 | }); |
---|
186 | |
---|
187 | var msg = Ext.get('msg'); |
---|
188 | var task = getTask(); |
---|
189 | |
---|
190 | if(task && task.data.completedDate){ |
---|
191 | setMsg('This task was completed on ' + task.data.completedDate.format('l, F d, Y')); |
---|
192 | } |
---|
193 | |
---|
194 | hasReminder.on('check', function(cb, checked){ |
---|
195 | reminder.setDisabled(!checked); |
---|
196 | if(checked && !reminder.getValue()){ |
---|
197 | reminder.setValue(opener.tx.data.getDefaultReminder(getTask())); |
---|
198 | } |
---|
199 | }); |
---|
200 | |
---|
201 | refreshData.defer(10); |
---|
202 | |
---|
203 | win.visible = true; |
---|
204 | win.activate(); |
---|
205 | |
---|
206 | title.focus(); |
---|
207 | |
---|
208 | function refreshData(){ |
---|
209 | if(!isNew){ |
---|
210 | var task = getTask(); |
---|
211 | hasReminder.setValue(!!task.data.reminder); |
---|
212 | form.getForm().loadRecord(task); |
---|
213 | setCompleted(task.data.completed); |
---|
214 | } |
---|
215 | } |
---|
216 | |
---|
217 | function saveData(){ |
---|
218 | var task; |
---|
219 | if(isNew){ |
---|
220 | task = opener.tx.data.tasks.createTask( |
---|
221 | title.getValue(), |
---|
222 | list.getRawValue(), |
---|
223 | dueDate.getValue(), |
---|
224 | description.getValue(), |
---|
225 | completed |
---|
226 | ); |
---|
227 | }else{ |
---|
228 | task = getTask(); |
---|
229 | task.set('completed', completed); |
---|
230 | } |
---|
231 | if(!hasReminder.getValue()){ |
---|
232 | reminder.setValue(''); |
---|
233 | } |
---|
234 | form.getForm().updateRecord(task); |
---|
235 | } |
---|
236 | |
---|
237 | function setCompleted(value){ |
---|
238 | completed = value; |
---|
239 | var cplBtn = Ext.getCmp('cpl-btn'); |
---|
240 | if (completed) { |
---|
241 | cplBtn.setText('Mark Active'); |
---|
242 | cplBtn.setIconClass('icon-mark-active'); |
---|
243 | hasReminder.disable(); |
---|
244 | reminder.disable(); |
---|
245 | } |
---|
246 | else { |
---|
247 | cplBtn.setText('Mark Complete'); |
---|
248 | cplBtn.setIconClass('icon-mark-complete'); |
---|
249 | setMsg(null); |
---|
250 | hasReminder.enable(); |
---|
251 | reminder.setDisabled(!hasReminder.checked); |
---|
252 | } |
---|
253 | } |
---|
254 | |
---|
255 | function setMsg(msgText){ |
---|
256 | var last; |
---|
257 | if(!msgText) { |
---|
258 | msg.setDisplayed(false); |
---|
259 | } else { |
---|
260 | msg.setDisplayed(''); |
---|
261 | msg.update(msgText); |
---|
262 | } |
---|
263 | description.anchorSpec.bottom = function(v){ |
---|
264 | if(v !== last){ |
---|
265 | last = v; |
---|
266 | var h = msg.getHeight(); |
---|
267 | return v - 95 - (h ? h + 8 : 0); |
---|
268 | } |
---|
269 | }; |
---|
270 | form.doLayout(); |
---|
271 | } |
---|
272 | |
---|
273 | function validate(){ |
---|
274 | if(Ext.isEmpty(title.getValue(), false)){ |
---|
275 | Ext.Msg.alert('Warning', 'Unable to save changes. A subject is required.', function(){ |
---|
276 | title.focus(); |
---|
277 | }); |
---|
278 | return false; |
---|
279 | } |
---|
280 | return true; |
---|
281 | } |
---|
282 | |
---|
283 | function getTask(){ |
---|
284 | var t = opener.tx.data.tasks.lookup(taskId); |
---|
285 | if(t){ |
---|
286 | //workaround WebKit cross-frame date issue |
---|
287 | fixDateMember(t.data, 'completedDate'); |
---|
288 | fixDateMember(t.data, 'reminder'); |
---|
289 | fixDateMember(t.data, 'dueDate'); |
---|
290 | } |
---|
291 | return t; |
---|
292 | } |
---|
293 | |
---|
294 | }); |
---|
295 | |
---|
296 | |
---|
297 | |
---|