Merge pull request #25 from goldledoigt/master

ExtJS 4 Todo addition

Merge pull request #25 from goldledoigt/master
ExtJS 4 Todo addition
a3fd9c96 · Addy Osmani · be29feaf · 839abc9a · a3fd9c96 · a3fd9c96
Commit a3fd9c96 authored Nov 10, 2011 by Addy Osmani
9 changed files
--- a/todo-example/extjs/css/style.css
+++ b/todo-example/extjs/css/style.css
+body {
+    margin: 0;
+    padding: 0;
+    background-color: #EEEEEE;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+div, h1, span {
+    outline: none;
+}
+
+#todo {
+    width: 480px;
+    padding: 20px;
+    color: #333333;
+    margin: 0 auto 40px;
+    background-color: white;
+    border-radius: 0 0 5px 5px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+}
+
+h1 {
+    margin: 0;
+    line-height: 1;
+    font-size: 36px;
+    text-align: center;
+    padding: 20px 0 30px;
+}
+
+.credits {
+    color: #999;
+    font-size: 0.9em;
+    text-align: center;
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.credits a, .credits a:visited {
+    color: #888;
+}
+
+input[type="text"] {
+    padding: 6px;
+    width: 466px !important;
+    margin: 0 auto;
+    font-size: 24px;
+    border: 1px solid #999999;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
+}
+
+.row {
+    font-size: 1.7em;
+    padding: 20px 0 10px;
+    border-bottom: 1px solid #CCCCCC;
+}
+
+.row input[type="checkbox"] {
+    vertical-align: middle;
+}
+
+.row span {
+    cursor: pointer;
+    margin-left: 5px;
+}
+
+.row span.checked {
+    color: #777777;
+    text-decoration: line-through;
+}
+
+.x-toolbar {
+    color: #555555;
+    margin-top: 10px;
+    padding: 8px 20px;
+    background-color: #F4FCE8;
+    border-radius: 0 0 5px 5px;
+    border-top: 1px solid #EDEDED;
+}
+
+.x-toolbar .x-container {
+    height: 21px;
+}
+
+.x-toolbar button {
+    float: right;
+    width: 170px;
+    border: 0 none;
+    color: #555555;
+    cursor: pointer;
+    border-radius: 12px;
+    padding: 3px 10px 4px;
+    background: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+.x-toolbar .x-over button {
+    background: rgba(0, 0, 0, 0.15);
+    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+.x-toolbar .x-pressed button {
+    background: rgba(0, 0, 0, 0.1);
+    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+.x-clear {
+    clear: both;
+}
\ No newline at end of file
--- a/todo-example/extjs/index.html
+++ b/todo-example/extjs/index.html
+<!doctype html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>ExtJS</title>
+
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+
+    <body>
+        <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>
+
+        <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2a/bootstrap.js"></script>
+        <script src="js/app.js"></script>
+    </body>
+</html>
--- a/todo-example/extjs/js/app.js
+++ b/todo-example/extjs/js/app.js
+Ext.Loader.setConfig({enabled:true});
+
+Ext.application({
+    name: 'Todo',
+    appFolder: 'js',
+    controllers: ['Tasks'],
+    launch: function() {
+
+        Ext.create('Ext.container.Container', {
+            renderTo: 'todo',
+            items: [{
+                xtype: 'taskField',
+                contentEl: 'taskfield'
+            }, {
+                xtype: 'taskList'
+            }, {
+                xtype: 'taskToolbar'
+            }]
+        });
+
+    }
+});
--- a/todo-example/extjs/js/controller/Tasks.js
+++ b/todo-example/extjs/js/controller/Tasks.js
+Ext.define('Todo.controller.Tasks', {
+
+    models: ['Task'],
+
+    stores: ['Tasks'],
+
+    extend: 'Ext.app.Controller',
+
+    views: ['TaskField', 'TaskList', 'TaskToolbar'],
+
+    refs: [
+        {ref: 'taskList', selector: 'taskList'},
+        {ref: 'taskToolbar', selector: 'taskToolbar'}
+    ],
+
+    init: function() {
+        this.control({
+            'taskField': {
+                keyup: this.onTaskFieldKeyup
+            },
+            'taskList': {
+                itemclick: this.onListItemClick
+            },
+            'taskToolbar > button': {
+                click: this.onClearButtonClick
+            }
+        });
+
+        this.getTasksStore().on({
+            scope: this,
+            update: this.onStoreDataChanged,
+            datachanged: this.onStoreDataChanged
+        });
+    },
+
+    onTaskFieldKeyup: function(field, event) {
+        var value = field.getValue();
+        if (event.keyCode === 13 && value !== '') {
+            var store = this.getTasksStore();
+            store.add({label: value, checked: false});
+            field.reset();
+            store.sync();
+        }
+    },
+
+    onListItemClick: function(list, record, el) {
+        record.set('checked', !record.get('checked'));
+        record.store.sync();
+        record.commit();
+    },
+
+    onClearButtonClick: function() {
+        var records = [],
+            store = this.getTasksStore();
+
+        store.each(function(record) {
+            if (record.get('checked')) {
+                records.push(record);
+            }
+        });
+        store.remove(records);
+        store.sync();
+    },
+
+    onStoreDataChanged: function() {
+        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(),
+            checkedCount = totalCount - count;
+
+        if (count) {
+            info = '<b>' + count + '</b> item' + (count > 1 ? 's' : '') + ' left.';
+        }
+
+        if (checkedCount) {
+            text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
+        }
+
+        container.update(info);
+        button.setText(text);
+        button.setVisible(checkedCount);
+        toolbar.setVisible(totalCount);
+    }
+
+});
--- a/todo-example/extjs/js/model/Task.js
+++ b/todo-example/extjs/js/model/Task.js
+Ext.define('Todo.model.Task', {
+    extend: 'Ext.data.Model',
+    fields: ['id', 'label', {name: 'checked', type: 'boolean'}],
+    proxy: {
+        type: 'localstorage',
+        id: 'todo'
+    }
+});
--- a/todo-example/extjs/js/store/Tasks.js
+++ b/todo-example/extjs/js/store/Tasks.js
+Ext.define('Todo.store.Tasks', {
+    autoLoad: true,
+    model: 'Todo.model.Task',
+    extend: 'Ext.data.Store'
+});
--- 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.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/TaskList.js
+++ b/todo-example/extjs/js/view/TaskList.js
+Ext.define('Todo.view.TaskList' , {
+    store: 'Tasks',
+    loadMask: false,
+    itemSelector: 'div.row',
+    extend: 'Ext.view.View',
+    alias : 'widget.taskList',
+    tpl: Ext.create('Ext.XTemplate',
+        '<tpl for=".">',
+            '<div class="row">',
+                '<input type="checkbox" {[values.checked ? "checked" : ""]} />',
+                '<span class="{[values.checked ? "checked" : ""]}">{label}</span>',
+            '</div>',
+        '</tpl>',
+        {compiled: true}
+    )
+});
--- a/todo-example/extjs/js/view/TaskToolbar.js
+++ b/todo-example/extjs/js/view/TaskToolbar.js
+Ext.define('Todo.view.TaskToolbar' , {
+    hidden: true,
+    extend: 'Ext.Toolbar',
+    alias : 'widget.taskToolbar',
+    items: [{
+        xtype: 'button',
+        hidden: true
+    }, {
+        xtype: 'container'
+    }]
+});