フィールド開始イベントを削除するafterLabelTextTplをクリックします。

Question

フォームフィールドを削除して、afterLabelTextTplでクリックイベントを発生させます。

ただし、各フィールドを個別に削除することはできません。

フィドル：https://fiddle.sencha.com/#fiddle/1ie7

2つのスパンテキストフィールドには、同じIDを持っています。あなたは個別にIDを設定することができない場合は、テキストフィールドは、標準のテキストフィールド

Answer 1

から動的に追加されているので、それはあなたがidがは、マークアップを生成しbeforeLabelTextTplでのXTemplate方法を活用することによって、ユニークになるように設定することができ、そうでなければなりません。レンダリングされたとき

'<span id="icon{id}" ... 

が、これは{ID}に置き換えられますフィールドのIDプロパティを持つ：これを行う1つの方法は、単語「アイコン」（またはいくつかの他の接頭辞）にフィールドの生成されたIDを追加することです。そして、あなたはafterrenderハンドラで、このユニークなIDを参照することができます

var simboloEl = Ext.get("icon" + field.id);

フィドル：あなたは両方のフィールドに同じidを使用するので、あなたが第二のためにそれが動作する最初のものをクリックしたときhttps://fiddle.sencha.com/#fiddle/1iek

Answer 2

これが起こるのを1つ。
フィドルをチェックしてください：https://fiddle.sencha.com/#fiddle/1ien

Ext.create('Ext.form.Panel', { 
title: 'Simple Form', 
bodyPadding: 5, 
width: 350, 

// The form will submit an AJAX request to this URL when submitted 
url: 'save-form.php', 

// Fields will be arranged vertically, stretched to full width 
layout: 'anchor', 
defaults: { 
    anchor: '100%' 
}, 

// The fields 
defaultType: 'textfield', 
items: [{ 
    fieldLabel: 'First Name', 
    name: 'first', 
    allowBlank: false, 
    beforeLabelTextTpl: [ 
     '<tpl>', 
      '<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>', 

     '</tpl>' 
    ], 
    listeners: { 
     afterrender: function(field){ 
     var form = this.up('form'); 
     var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]); 
     //var simboloEl = Ext.get("icon"); 
       if(simboloEl){ 
        simboloEl.on("click", function() { 
         form.remove(field); 
        }); 
       } 
     } 
    } 
},{ 
    fieldLabel: 'Last Name', 
    name: 'last', 
    allowBlank: false, 
    beforeLabelTextTpl: [ 
     '<tpl>', 
      '<span style="color: red; cursor: pointer"; class="' + Ext.baseCSSPrefix + 'required">X </span>', 

     '</tpl>' 
    ], 
    listeners: { 
     afterrender: function(field){ 
     var form = this.up('form'); 
     var simboloEl = Ext.get(field.getEl().dom.childNodes[0].getElementsByClassName('x-required')[0]); 
     //var simboloEl = Ext.get("icon1"); 
       if(simboloEl){ 
        simboloEl.on("click", function() { 
         form.remove(field); 
        }); 
       } 
     } 
    } 
}], 
renderTo: Ext.getBody() 
});