在 afterLabelTextTpl 中删除字段触发事件单击

Question

我想删除一个表单域，在 afterLabelTextTpl 中触发一个点击事件。

但是，我无法单独删除每个字段。

Fiddle: https://fiddle.sencha.com/#fiddle/1ie7

两个跨度文本字段具有相同的 ID。一定是这样，因为文本字段是从标准文本字段动态添加的

Answer 1

如果不能单独设置id，可以利用beforeLabelTextTpl中的XTemplate生成标记的方式将id设置为唯一。一种方法是将字段生成的 ID 附加到单词“icon”（或其他前缀）：

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

呈现时，这会将 {id} 替换为字段的 id 属性。然后你可以在afterrender handler中引用这个唯一的id：

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

Fiddle: https://fiddle.sencha.com/#fiddle/1iek

Answer 2

发生这种情况是因为您对两个字段使用了相同的 ID，当您点击第一个字段时它也适用于第二个字段。
请勾选 Fiddle: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()
});

在 afterLabelTextTpl 中删除字段触发事件单击

Remove field firing event click in afterLabelTextTpl

javascript

extjs

extjs5