如何在sencha touch中拥有可编辑列表？

Question

• 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 appear. Any ideas ??

Answer 1

Here is an iPhone style editable list

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

Answer 2

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();
                        }
                    }
                }
            }

Answer 3

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.