Question

我想在单击按钮时执行内联编辑，然后激活文本字段以显示标题和数字字段持续时间。如何实现我在Sencha中的新功能。

{
            xtype: 'list',
            store: "Plays",
            itemId:"playsList",

            mode: 'MULTI',
            loadingText: "Loading PlaysList...",
            emptyText: '<div class="notes-list-empty-text">No PlayList found.</div>',
            itemTpl: '<div class="list"><div class="list-item-title">{title}</div><div class="list-item-narrative">{duration}</div><div class="list-item-hide">{hidden}</div></div>',      
            grouped: true,


        },
     {
                xtype: "button",
                iconCls: "inlineedit",
                iconMask: true,
                itemId: "inlineediting"
        },

因此，当我点击按钮时，它会激活或在列表中为标题文本字段和持续时间编号字段提供编辑功能。

Answer 1

我的猜测是做这样的事情：

在模型中添加editing字段

fields: [
    ... // Other fields
    {name:"editing", type:"boolean", defaultValue: false}, 
]

使用此类模板

itemTpl: new Ext.XTemplate(
    '<tpl if="editing == false">',
        '<input type="text" name="title" value="{title}" disabled/>',
    '<tpl else>',
        '<input type="text" name="title" value="{title}"/>',
    '</tpl>'
)

然后当您单击按钮时，您需要按照以下步骤操作：

获取商店
遍历商店的所有记录
对于每条记录，请将editing值设置为true

然后模板将重新渲染，输入将是可编辑的。

当然，您需要对CSS进行操作，以向用户隐藏它是一个输入。

最后，当编辑完成后（我假设您将有某种'完成'按钮），您需要浏览列表中的所有项目并使用新值更新商店。

我没有尝试过，但我过去做过类似的事情。

希望这有帮助

Sencha中列表中的内联编辑

1 个答案: