Question

我有一个Combobox（ExtJs 6），我想在列表的每一行显示一个值和删除按钮。我已经尝试过使用XTemplate，但之后没有选择任何值，我不知道如何从删除按钮调用一个函数。我怎样才能做到这一点？任何例子都赞赏。

Answer 1

主要部分是：

创建一个在下拉列表中呈现按钮的模板
在下拉列表中收听itemclick事件并停止活动，如果用户点击按钮，则从商店中删除该项目

https://fiddle.sencha.com/#fiddle/1j7r

    var combo = Ext.create({
        xtype: 'combo',
        editable: false,
        store: ['val1', 'val2', 'val3'],

        listConfig: {
            listeners: {
                itemclick: function(list, record, item, index, e) {
                    if (e.target.tagName == 'BUTTON') {
                        e.preventDefault();
                        combo.store.removeAt(index);
                    }
                }
            }
        },

        tpl: '<ul class="x-list-plain"><tpl for="."><li role="option" class="x-boundlist-item">{field1}<button>x</button></li></tpl></ul>',

    });

虽然@Mr.George's answer可以解决问题，但它遇到了一些问题：

更新商店的价值只是为了在下拉菜单中显示一个按钮;应该使用模板。这也会导致HTML显示在组合的文本字段中
HTML中的JavaScript。请改用事件处理程序
依赖于Ext.getCmp，这意味着它依赖于全局ID，因此您不能在同一页面上拥有两个实例

Answer 2

这是一个小提琴https://fiddle.sencha.com/#fiddle/1j77

你可以那样做

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

}）;

ExtJS Combobox带文字和按钮

2 个答案: