带有文本和按钮的ExtJS组合框

我有一个组合框（extjs6），我想在列表的每一行显示一个值和删除按钮。 我试过使用XTemplate，但是没有选择任何值，我不知道如何从delete按钮调用函数。 我该怎么做？任何例子都值得欣赏。

这里有一把小提琴

你能做到的

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create({
        xtype:'window',
        width:200,
        height:200,
        items:[{
            xtype:'combo',
            id:'myCombo',
            editable:false,
            store:['val1','val2','val3'],
            listeners:{
                afterrender:function(combo){
                    var records=combo.store.data.items;
                    records.forEach(function(rec,index){
                        var field= rec.get('field1');
                        rec.set('field1',
                                ''+field+' <button onclick="'+
                                'Ext.getCmp(\'myCombo\').store.remove(Ext.getCmp(\'myCombo\').store.findRecord(\'field1\',\''+
                                field+'\'));">Delete</button>');

                    });
                }
            }
        }]
    }).show();
}

Ext.application({
名字：“小提琴”，
启动：函数（）{
外部创建({
xtype:“窗口”，
宽度：200，
身高：200，
项目：[{
xtype:“组合”，
id:'myCombo'，
可编辑：false，
商店：['val1'，'val2'，'val3']，
听众：{
afterrender:函数（组合）{
var记录=combo.store.data.items；
forEach（函数（rec，索引）{
var field=rec.get（'field1'）；
记录集（'field1'，
''+字段+'删除'）；
});
}
}
}]
}).show（）；
}

}))

这是一把小提琴

你能做到的

Ext.application({
name : 'Fiddle',

launch : function() {
    Ext.create({
        xtype:'window',
        width:200,
        height:200,
        items:[{
            xtype:'combo',
            id:'myCombo',
            editable:false,
            store:['val1','val2','val3'],
            listeners:{
                afterrender:function(combo){
                    var records=combo.store.data.items;
                    records.forEach(function(rec,index){
                        var field= rec.get('field1');
                        rec.set('field1',
                                ''+field+' <button onclick="'+
                                'Ext.getCmp(\'myCombo\').store.remove(Ext.getCmp(\'myCombo\').store.findRecord(\'field1\',\''+
                                field+'\'));">Delete</button>');

                    });
                }
            }
        }]
    }).show();
}

Ext.application({
名字：“小提琴”，
启动：函数（）{
外部创建({
xtype:“窗口”，
宽度：200，
身高：200，
项目：[{
xtype:“组合”，
id:'myCombo'，
可编辑：false，
商店：['val1'，'val2'，'val3']，
听众：{
afterrender:函数（组合）{
var记录=combo.store.data.items；
forEach（函数（rec，索引）{
var field=rec.get（'field1'）；
记录集（'field1'，
''+字段+'删除'）；
});
}
}
}]
}).show（）；
}

}))

主要部分是：

• 创建一个在下拉列表中呈现按钮的模板
• 在下拉列表中侦听itemclick事件并停止该事件，如果用户单击按钮，则从存储中删除该项目

var-combo=Ext.create({
xtype:'组合'，
可编辑：false，
商店：['val1'，'val2'，'val3']，
列表配置：{
听众：{
itemclick：函数（列表、记录、项目、索引、e）{
如果（e.target.tagName==‘按钮’）{
e、 预防默认值（）；
combo.store.removeAt（索引）；
}
}
}
},
tpl:“
{field1}x
”，
});

虽然这是一个技巧，但它存在一些问题：

• 更新存储的值，以便在下拉列表中显示一个按钮；应该改用模板。这也会导致HTML显示在组合的文本字段中
• HTML中的JavaScript。改用事件处理程序
• 依赖于

  Ext.getCmp

  ，这意味着它依赖于一个全局id，因此同一页上不能有两个实例

主要部件有：

• 创建一个在下拉列表中呈现按钮的模板
• 在下拉列表中侦听itemclick事件并停止该事件，如果用户单击按钮，则从存储中删除该项目

var-combo=Ext.create({
xtype:'组合'，
可编辑：false，
商店：['val1'，'val2'，'val3']，
列表配置：{
听众：{
itemclick：函数（列表、记录、项目、索引、e）{
如果（e.target.tagName==‘按钮’）{
e、 预防默认值（）；
combo.store.removeAt（索引）；
}
}
}
},
tpl:“
{field1}x
”，
});

虽然这是一个技巧，但它存在一些问题：

• 更新存储的值，以便在下拉列表中显示一个按钮；应该改用模板。这也会导致HTML显示在组合的文本字段中
• HTML中的JavaScript。改用事件处理程序
• 依赖于

  Ext.getCmp

  ，这意味着它依赖于一个全局id，因此同一页上不能有两个实例

---

它确实有效，我几乎投了赞成票，但如果你在2016年添加内联JavaScript，我的良心不会让我这么做。另外，使用

Ext.getCmp（'myCombo'）

意味着它不可重用（每页只能有一个）。如果你解释说这是一起被黑客攻击的，并且解释了它的陷阱，我会投赞成票。因此，如果你愿意，你可以尝试以其他方式在extjs组合框中添加一个按钮，我认为这是最简单的方法之一。其他方法是将按钮组件附加到dom中的特定id，因此问题几乎相同。或者使用TPL添加组件，这样您就无法从TPL获取viewcontroller。另一个问题是，您不应该编辑组合的值，

combo.getValue（）

现在将返回一个带有HTML按钮的字符串。确实有效，我几乎投了赞成票，但如果您在2016年添加内联JavaScript，我的良心不会让我这么做。另外，使用

Ext.getCmp（'myCombo'）

意味着它不可重用（每页只能有一个）。如果你解释说这是一起被黑客攻击的，并且解释了它的陷阱，我会投赞成票。因此，如果你愿意，你可以尝试以其他方式在extjs组合框中添加一个按钮，我认为这是最简单的方法之一。其他方法是将按钮组件附加到dom中的特定id，因此问题几乎相同。或者使用TPL添加组件，这样您就无法从TPL获取viewcontroller。另一个问题是您不应该编辑组合的值，

combo.getValue（）

现在将返回一个带有HTML按钮的字符串。您应该显示您尝试过的内容，以便回答c