how to have editable list in sencha touch?

• I want to build a todo list. So, Im looking for list which on itemDouble tap will allow me to edit item by allowing textfield to a开发者_C百科ppear. Any ideas ??

Here is an iPhone style editable list

https://github.com/tmanderson/Sencha-Touch-Edit-List

Just create a list, add a itemdoubletap listener to it, and on that event, create a floating panel with textarea and docked toolbar button inside. Check Sencha Touch examples for reference.

Here is a working Example.
Encapsulate your data in a div which you want to edit.Give the 'data-name' attribute to that div having same data name. Capture the itemdoubletap event and find the actual target. In this example, as the data was 'title' so gave the same name to its div's attribute

Ext.create('Ext.List', {
                fullscreen: true,
                itemTpl: '<div data-name="title">{title}</div>',
                data: [
                    { title: 'Item 1' },
                    { title: 'Item 2' },
                    { title: 'Item 3' },
                    { title: 'Item 4' }
                ],
                listeners: {
                    itemdoubletap: function (list, index, target, record, e, eOpts) {
                        var actualTarget = e.getTarget('div');
                        if (actualTarget.dataset.name == 'title') {
                            actualTarget.innerHTML = '';
                            var textfield = document.createElement("INPUT");
                            textfield.setAttribute("type", "text");
                            textfield.style.width = '100%',
                            textfield.record = record;
                            textfield.value = record.data[actualTarget.dataset.name];
                            textfield.onblur = function () {
                                if (record.data[actualTarget.dataset.name] != this.value) {
                                    record.data[actualTarget.dataset.name] = this.value;
                                }
                                this.parentNode.innerHTML = this.value;
                            }
                            actualTarget.appendChild(textfield);
                            textfield.focus();
                        }
                    }
                }
            }