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

Question

• 我想建立一个待办事项清单。 因此，我正在寻找在item双击上的列表，这将允许我通过允许显示文本字段来编辑项目。 有任何想法吗 ？？

Answer 1

这是iPhone样式的可编辑列表

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

Answer 2

这是一个有效的示例 。
将数据封装在要编辑的div中 ，将'data-name'属性赋予具有相同数据名称的div 。 捕获itemdoubletap事件并找到实际目标。 在此示例中，由于数据为“ title ”，因此为其div的属性指定了相同的名称

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

只需创建一个列表，向其中添加一个itemdoubletap侦听器，然后在该事件上创建一个带有textarea和固定工具栏按钮的浮动面板。 查看Sencha Touch示例以供参考。