Question

我想建立一个待办事项清单。所以我寻找itemDouble上的列表点击将允许我编辑项目允许显示文本字段。任何想法??

Answer 1

这是一个iPhone风格的可编辑列表

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

Answer 2

只需创建一个列表，向其中添加项目双击侦听器，然后在该事件上创建一个带有textarea和停靠工具栏按钮的浮动面板。 Cheek Sencha Touch示例供参考。

Answer 3

这是一个有效的Example 将您的数据封装在要编辑的 div 中。将＆＃39;数据名称属性添加到具有 div 的 div 相同的数据名称。捕获 itemdoubletap 事件并找到实际目标。在此示例中，由于数据是标题＆＃39;所以给它的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();
                        }
                    }
                }
            }

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

3 个答案: