Simple Ext 4 View

by Walter Rumsby

HTML

<!-- you could put this in a separate file too - and load it with Ext's Loader -->
<script id="todo-tpl" type="text/template">
    <ul>
        <tpl for=".">
            <li class="todo <tpl if="isDone"> todo-done</tpl>">{description:htmlEncode}</li>
        </tpl>
    </ul>
</script>

SCSS

body {
    font-family:"Open Sans", sans-serif;
    color: #333;
}
.x-hidden {
    display: none;
}
.todo-list {
    list-style: none;
    padding: 0;
    &:focus{
        outline: none;    
    }
}
.todo {
    margin: 2px;
    padding: 2px 4px;
    background-color: #eee;
    &:not(.todo-done) {
        cursor: pointer;
        font-weight: bold;
    }
}
.todo-done {
    text-decoration: line-through;
    color: #666;
}

JavaScript

// TODO: This would be in a seperate file
Ext.define('ToDoModel', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'description',
        type: 'string'
    }, {
        name: 'isDone',
        type: 'boolean'
    }]
});

// TODO: this would be in a seperate file
var toDoStore = Ext.create('Ext.data.Store', {
    id: 'ToDoStore',
    model: 'ToDoModel',
    data: [{
        'description': 'Something',
            'isDone': true
    }, {
        'description': 'Something else',
            'isDone': false
    }, {
        'description': 'etc.',
            'isDone': false
    }]
});

var toDoTpl = new Ext.XTemplate(Ext.fly('todo-tpl').getHTML());


var listView = Ext.create('Ext.view.View', {
    // REQUIRED
    store: toDoStore,
    // REQUIRED - Remembering in the past I had problems with itemTpl generating additional elements around each item
    tpl: toDoTpl,
    renderTo: Ext.getBody(),
    // REQUIRED
    itemSelector: '.todo',
    baseCls: 'todo-list',
    emptyText: 'No items :(',
    // We need to do this because we are setting data on the store directly,
    // normally emptyText will be applied if after store.load the store has no data.
    deferEmptyText: false,
    listeners: {
        itemclick: function (view, record) {
            this.markDone(record);
        }
    },
    markDone: function (record) {
        var isDone = record.get('isDone');

        if (isDone === false) {
            record.set('isDone', true);
        }
    }
});