Permalink
Browse files

Added editing on double click.

The editing works as long as you hit enter once you're done. I was having some trouble getting the blur event to take hold. I think the TaskList might need to be broken up to have a component rendering each item.

Also added the remove functionality, however there is a js error that occurs when doing this :/ not sure what causes it, but it works...
  • Loading branch information...
boushley committed Feb 25, 2012
1 parent 111533b commit f3deb4e6d5be18d4ba1e2179c609e38367aba866
@@ -20,7 +20,9 @@ Ext.define('Todo.controller.Tasks', {
},
'taskList': {
todoChecked: this.onTodoChecked,
- itemdblclick: this.onTodoDblClicked
+ itemdblclick: this.onTodoDblClicked,
+ onTaskEditKeyup: this.onTaskEditKeyup,
+ todoRemoveSelected: this.onTodoRemoveSelected
},
'completeButton': {
click: this.onClearButtonClick
@@ -39,7 +41,7 @@ Ext.define('Todo.controller.Tasks', {
onTaskFieldKeyup: function(field, event) {
var ENTER_KEY_CODE = 13;
- var value = field.getValue();
+ var value = field.getValue().trim();
if (event.keyCode === ENTER_KEY_CODE && value !== '') {
var store = this.getTasksStore();
store.add({label: value, checked: false});
@@ -60,6 +62,32 @@ Ext.define('Todo.controller.Tasks', {
record.commit();
},
+ onTodoRemoveSelected: function (record) {
+ var store = this.getTasksStore();
+ store.remove(record);
+ store.sync();
+ },
+
+ onTaskEditKeyup: function (keyEvent, record, extEl) {
+ var ENTER_KEY_CODE = 13;
+ if (event.keyCode === ENTER_KEY_CODE) {
+ this.finalizeTaskEdit(extEl, record);
+ }
+ },
+
+ finalizeTaskEdit: function (extEl, record) {
+ value = extEl.getValue().trim();
+
+ if (!value)
+ return;
+
+ record.set('label', value);
+ record.set('editing', false);
+ record.store.sync();
+ record.commit();
+
+ },
+
onClearButtonClick: function() {
var records = [],
store = this.getTasksStore();
@@ -24,7 +24,7 @@ Ext.define('Todo.view.TaskList' , {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'checkbox') {
- parent = extEl.parent('li')
+ parent = extEl.parent('li');
this.fireEvent('todoChecked', this.getRecord(parent));
}
}, this, {
@@ -33,6 +33,25 @@ Ext.define('Todo.view.TaskList' , {
// do the if logic above.
delegate: 'input'
});
+
+ this.el.on('keyup', function (keyEvent, el) {
+ var extEl = Ext.get(el)
+ , parent;
+ if(extEl.getAttribute('type') === 'text') {
+ parent = extEl.parent('li');
+ this.fireEvent('onTaskEditKeyup', keyEvent, this.getRecord(parent), extEl);
+ }
+ }, this, {
+ delegate: 'input'
+ });
+
+ this.el.on('click', function (clickEvent, el) {
+ var extEl = Ext.get(el)
+ , parent = extEl.parent('li');
+ this.fireEvent('todoRemoveSelected', this.getRecord(parent));
+ }, this, {
+ delegate: 'a'
+ });
}
}
});

0 comments on commit f3deb4e

Please sign in to comment.