Question

我想删除一个表单字段，在afterLabelTextTpl中触发click事件。

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

小提琴：https://fiddle.sencha.com/#fiddle/1ie7

两个跨度文本字段具有相同的ID。必须如此，因为文本字段是从标准文本字段动态添加的

Answer 1

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

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

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

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

小提琴：https://fiddle.sencha.com/#fiddle/1iek

Answer 2

这是因为您对两个字段都使用相同的ID，当您点击第一个字段时，它也适用于第二个字段。
请检查小提琴：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

2 个答案: