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

839abc9a · goldledoigt · c3992424 · 839abc9a · 839abc9a · 839abc9a
Commit 839abc9a authored Nov 09, 2011 by goldledoigt
6 changed files
--- 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;

--- 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>

--- 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',
+                xtype: 'taskField',
-                html: '<h1>Todos</h1>'
+                contentEl: 'taskfield'
-            }, {
-                xtype: 'taskField'
            }, {
                xtype: 'taskList'
            }, {

--- 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);
    }
 });
--- a/todo-example/extjs/js/view/TaskField.js
+++ b/todo-example/extjs/js/view/TaskField.js
 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('');
+    }
 });
--- 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'
    }]