ExtJSコンボボックス（テキストとボタン付き）

Question

私はコンボボックス（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。イベントハンドラを使用して代わりに
• それはグローバルIDに依存していることを意味するExt.getCmpに依存、あなたが同じページ上の2つのインスタンス

Answer 2

は、あなたが）}

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

ことを行うことができますフィドルhttps://fiddle.sencha.com/#fiddle/1j77

です。