todo2

css

    <style>
.x-item-selected {
    background: #eeffaa;
}
body {
    padding: 20px;
}
#todoTxt {
    margin-bottom: 20px;
}
.item {
    height: 30px;
    width: 200px;
    position: relative;
}
.done {
    color: #777777;
    text-decoration: line-through;
}

li.item a {
    position: absolute;
    right: 5px;
    top: 0px;
    display: none;
}

li input {
    margin-right: 10px;
}
    </style>

gistfile1.js

Ext.onReady(function() {
    Ext.define('Todo', {
        extend: 'Ext.data.Model',
        fields: [
            {
                name: 'title', type: 'string'
            },
            {
                name: 'done', type: 'boolean', default: false
            }
        ]
    });

    store = Ext.create('Ext.data.Store', {
        model: 'Todo',
        proxy: {
            type: 'localstorage',
            id  : 'todo'
        },
        listeners: {
            'datachanged': function() {
                updateFooter();
            },
            'update': function(st, model, operation) {
                if (operation === 'edit') {
                    Ext.get('saveBtn').show();
                } else if (operation === 'commit') {
                    Ext.get('saveBtn').hide();
                }
            }
        },
        remaining: function() {
            var cnt = 0;
            this.each(function(model) {
                if (! model.get('done')) {
                    cnt++
                }
            });
            return cnt;
        }
    });

    var runner = new Ext.util.TaskRunner();
    var task = runner.newTask({
        run: function () {
            store.save();
        },
        interval: 5000
    });

    task.start();

    var tpl = new Ext.XTemplate(
        '<ul>',
        '<tpl for=".">',
            '<li class="item {[this.itemCls(values)]}">' ,
              '<input type="checkbox" {[ this.checkboxValue(values) ]}"/>',
              '<span class="x-editable">{title}</span>  <a id="{#}" href="#">Delete</a>',
            '</li>',
        '</tpl>',
        '</ul>',
        {
            checkboxValue: function(values) {
                if (values.done) {
                    return " checked='true' ";
                } else {
                    return ""
                }
            },
            itemCls: function(values) {
                return values.done ? 'done' : '';
            }
        }
    );


    var footerTpl = new Ext.XTemplate(
        'remaining {cnt} left'
    )

    var view = Ext.create('Ext.view.View', {
        store: store,
        draggable: true,
        tpl: tpl,
        itemSelector: 'li.item',
        emptyText: 'No Todo item',
        renderTo: 'todos',
        plugins: [
            Ext.create('Ext.ux.DataView.LabelEditor', {dataIndex: 'title'})
        ],
        listeners: {
            'itemclick': function(comp, model, el, index, evt) {
                if (evt.target.tagName == 'A') {
                    store.remove(model);
                } else if (evt.target.tagName == 'INPUT') {
                    console.log(evt.target, model);
                    model.set('done', evt.target.checked);
                    updateFooter();
                }
            },
            'itemmouseenter': function(view, model, item) {
                Ext.fly(item).down('a').show();
            },
            'itemmouseleave': function(view, model, item) {
                Ext.fly(item).down('a').hide();
            },
        }
    });

    Ext.get('todoTxt').on('keypress', function(evt, el) {
        if (evt.charCode === 13) {
            store.add(Ext.create('Todo', {
                title: el.value
            }));
            el.value = '';
        }
    });

    function updateFooter() {
        footerTpl.overwrite('footer', {
            cnt: store.remaining()
        });
    }

    Ext.get('saveBtn').on('click', function() {
        store.save();
    })

    store.load();

});