pphetra/gist:3310711

## gistfile1.txt
<html>
    <head>
    <link rel="stylesheet" href="www/extjs/resources/css/ext-all.css">
    <script src="www/extjs/ext-all-debug.js"></script>

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


    <script>
    /**
     * @class Ext.ux.DataView.LabelEditor
     * @extends Ext.Editor
     */
    Ext.define('Ext.ux.DataView.LabelEditor', {

        extend: 'Ext.Editor',

        alignment: 'tl-tl',

        completeOnEnter: true,

        cancelOnEsc: true,

        shim: false,

        autoSize: {
            width: 'boundEl',
            height: 'field'
        },

        labelSelector: 'x-editable',

        requires: [
            'Ext.form.field.Text'
        ],

        constructor: function(config) {
            config.field = config.field || Ext.create('Ext.form.field.Text', {
                allowBlank: false,
                selectOnFocus:true
            });
            this.callParent([config]);
        },

        init: function(view) {
            this.view = view;
            this.mon(view, 'render', this.bindEvents, this);
            this.on('complete', this.onSave, this);
        },

        // initialize events
        bindEvents: function() {
            this.mon(this.view.getEl(), {
                click: {
                    fn: this.onClick,
                    scope: this
                }
            });
        },

        // on mousedown show editor
        onClick: function(e, target) {
            var me = this,
                item, record;

            if (Ext.fly(target).hasCls(me.labelSelector) && !me.editing && !e.ctrlKey && !e.shiftKey) {
                e.stopEvent();
                item = me.view.findItemByChild(target);
                record = me.view.store.getAt(me.view.indexOf(item));
                me.startEdit(target, record.data[me.dataIndex]);
                me.activeRecord = record;
            } else if (me.editing) {
                me.field.blur();
                e.preventDefault();
            }
        },

        // update record
        onSave: function(ed, value) {
            this.activeRecord.set(this.dataIndex, value);
        }
    });


 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',
        data: [
            {title: 'text'}
        ],
        listeners: {
            'datachanged': function(store) {
                Ext.defer(updateFooter, 200, null, [store]);
            }
        },
        remaining: function() {
            var cnt = 0;
            this.each(function(model) {
                if (! model.get('done')) {
                    cnt++
                }
            });
            return cnt;
        }
    });

    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(store) {
        footerTpl.overwrite('footer', {
            cnt: store.remaining()
        });
    }

});
    </script>
    </head>
    <body>
        <input id="todoTxt" type="text"></input>

        <div id="todos">

        </div>

        <div id="footer">
        </div>
    </body>

</html>
	<html>
	<head>
	<link rel="stylesheet" href="www/extjs/resources/css/ext-all.css">
	<script src="www/extjs/ext-all-debug.js"></script>

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



	<script>
	/**
	* @class Ext.ux.DataView.LabelEditor
	* @extends Ext.Editor
	*/
	Ext.define('Ext.ux.DataView.LabelEditor', {

	extend: 'Ext.Editor',

	alignment: 'tl-tl',

	completeOnEnter: true,

	cancelOnEsc: true,

	shim: false,

	autoSize: {
	width: 'boundEl',
	height: 'field'
	},

	labelSelector: 'x-editable',

	requires: [
	'Ext.form.field.Text'
	],

	constructor: function(config) {
	config.field = config.field \|\| Ext.create('Ext.form.field.Text', {
	allowBlank: false,
	selectOnFocus:true
	});
	this.callParent([config]);
	},

	init: function(view) {
	this.view = view;
	this.mon(view, 'render', this.bindEvents, this);
	this.on('complete', this.onSave, this);
	},

	// initialize events
	bindEvents: function() {
	this.mon(this.view.getEl(), {
	click: {
	fn: this.onClick,
	scope: this
	}
	});
	},

	// on mousedown show editor
	onClick: function(e, target) {
	var me = this,
	item, record;

	if (Ext.fly(target).hasCls(me.labelSelector) && !me.editing && !e.ctrlKey && !e.shiftKey) {
	e.stopEvent();
	item = me.view.findItemByChild(target);
	record = me.view.store.getAt(me.view.indexOf(item));
	me.startEdit(target, record.data[me.dataIndex]);
	me.activeRecord = record;
	} else if (me.editing) {
	me.field.blur();
	e.preventDefault();
	}
	},

	// update record
	onSave: function(ed, value) {
	this.activeRecord.set(this.dataIndex, value);
	}
	});



	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',
	data: [
	{title: 'text'}
	],
	listeners: {
	'datachanged': function(store) {
	Ext.defer(updateFooter, 200, null, [store]);
	}
	},
	remaining: function() {
	var cnt = 0;
	this.each(function(model) {
	if (! model.get('done')) {
	cnt++
	}
	});
	return cnt;
	}
	});

	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(store) {
	footerTpl.overwrite('footer', {
	cnt: store.remaining()
	});
	}

	});
	</script>
	</head>
	<body>
	<input id="todoTxt" type="text"></input>

	<div id="todos">

	</div>

	<div id="footer">
	</div>
	</body>

	</html>
No results found