Удалить событие сжигания поля нажмите на afterLabelTextTpl

Я хочу удалить поле формы, нажав событие click в afterLabelTextTpl.

Однако я не могу удалить каждое поле отдельно.

Сценарий: https://fiddle.sencha.com/#fiddle/1ie7

Два текстовых поля span имеют одинаковый идентификатор. Это должно быть так, потому что текстовые поля динамически добавляются из стандартного текстового поля

javascript,extjs,extjs5,

0

Ответов: 2

1 принят

Если вы не можете установить идентификатор отдельно, вы можете установить идентификатор уникальным, воспользовавшись тем, как XTemplate в beforeLabelTextTpl генерирует разметку. Один из способов сделать это - добавить сгенерированный идентификатор поля к слову « значок » (или другой префикс):

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

При визуализации это заменит {id} на свойство id поля . Затем вы можете обратиться к этому уникальному идентификатору в обработчике afterrender:

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

Сценарий: https://fiddle.sencha.com/#fiddle/1iek

1

Это происходит потому, что вы используете одинаковые идентификаторы для обоих полей, и когда вы нажимаете на первый, он работает и для второго.
Проверьте 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()
});
JavaScript, ExtJS, extjs5,
Похожие вопросы
Яндекс.Метрика