speed of rendering + show/hide clear button + css fix

hwole · Nov 9, 2011 · 839abc9 · 839abc9
1 parent c399242
commit 839abc9
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 13 deletions.
diff --git a/todo-example/extjs/css/style.css b/todo-example/extjs/css/style.css
@@ -21,6 +21,7 @@ div, h1, span {
 
 h1 {
     margin: 0;
+    line-height: 1;
     font-size: 36px;
     text-align: center;
     padding: 20px 0 30px;
@@ -58,9 +59,11 @@ input[type="text"] {
 
 .row span {
     cursor: pointer;
+    margin-left: 5px;
 }
 
 .row span.checked {
+    color: #777777;
     text-decoration: line-through;
 }
 
@@ -79,7 +82,7 @@ input[type="text"] {
 
 .x-toolbar button {
     float: right;
-    width: 120px;
+    width: 170px;
     border: 0 none;
     color: #555555;
     cursor: pointer;

diff --git a/todo-example/extjs/index.html b/todo-example/extjs/index.html
@@ -11,7 +11,10 @@
     </head>
 
     <body>
-        <div id="todo"></div>
+        <div id="todo">
+            <h1>Todos</h1>
+            <input type="text" id="taskfield" placeholder="What needs to be done?" />
+        </div>
         <div class="credits">
             Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
         </div>

diff --git a/todo-example/extjs/js/app.js b/todo-example/extjs/js/app.js
@@ -9,10 +9,8 @@ Ext.application({
         Ext.create('Ext.container.Container', {
             renderTo: 'todo',
             items: [{
-                xtype: 'container',
-                html: '<h1>Todos</h1>'
-            }, {
-                xtype: 'taskField'
+                xtype: 'taskField',
+                contentEl: 'taskfield'
             }, {
                 xtype: 'taskList'
             }, {

diff --git a/todo-example/extjs/js/controller/Tasks.js b/todo-example/extjs/js/controller/Tasks.js
@@ -63,21 +63,30 @@ Ext.define('Todo.controller.Tasks', {
     },
 
     onStoreDataChanged: function() {
-        var info = '',
+        var info = '', text = '',
             store = this.getTasksStore(),
+            totalCount = store.getCount(),
             toolbar = this.getTaskToolbar(),
+            button = toolbar.items.first(),
             container = toolbar.items.last(),
             records = store.queryBy(function(record) {
                 return !record.get('checked');
             }),
-            count = records.getCount();
+            count = records.getCount(),
+            checkedCount = totalCount - count;
 
         if (count) {
-            info = count + ' item' + (count > 1 ? 's' : '') + ' left.';
+            info = '<b>' + count + '</b> item' + (count > 1 ? 's' : '') + ' left.';
+        }
+
+        if (checkedCount) {
+            text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
         }
 
         container.update(info);
-        toolbar.setVisible(store.getCount());
+        button.setText(text);
+        button.setVisible(checkedCount);
+        toolbar.setVisible(totalCount);
     }
 
 });
diff --git a/todo-example/extjs/js/view/TaskField.js b/todo-example/extjs/js/view/TaskField.js
@@ -1,6 +1,33 @@
 Ext.define('Todo.view.TaskField' , {
+
     enableKeyEvents: true,
+
     alias : 'widget.taskField',
-    extend: 'Ext.form.TextField',
-    emptyText: 'What needs to be done?'
+
+    extend: 'Ext.Component',
+
+    emptyText: 'What needs to be done?',
+
+    afterRender: function() {
+        this.callParent(arguments);
+        this.field = this.el.first();
+        this.field.on('keyup', this.onKeyup, this);
+    },
+
+    onKeyup: function(event) {
+        this.fireEvent('keyup', this, event);
+    },
+
+    getValue: function() {
+        return this.field.dom.value;
+    },
+
+    setValue: function(value) {
+        this.field.dom.value = value;
+    },
+
+    reset: function() {
+        this.setValue('');
+    }
+
 });
diff --git a/todo-example/extjs/js/view/TaskToolbar.js b/todo-example/extjs/js/view/TaskToolbar.js
@@ -4,7 +4,7 @@ Ext.define('Todo.view.TaskToolbar' , {
     alias : 'widget.taskToolbar',
     items: [{
         xtype: 'button',
-        text: 'Clear completed'
+        hidden: true
     }, {
         xtype: 'container'
     }]