ExtJS - Как выделить собственную форму

Question

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

Код сниппета

myForm.getEl().highlight("ffff9c", { 
    attr: "backgroundColor", 
    endColor: "ffc333", 
    easing: 'easeIn', 
    duration: 1000 
}); 

Сенча Fiddle Ссылка:https://fiddle.sencha.com/#fiddle/fij

Answer 1

Ваш код работает правильно. Вы выбираете элемент контейнера с помощью метода getEl() на вашей панели форм. Текстовая область закрывает вашу панель, поэтому вы видите эффект ослабления внизу. Если вы хотите, чтобы подчеркнуть ваши поля, вы должны перебирать поля формы с использованием каждого метода:

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.create('Ext.form.Panel', { 
      title: 'My Form', 
      id: 'myform', 
      renderTo: Ext.getBody(), 
      width: 500, 
      height: 250, 

      items: [{ 
       xtype: 'textarea', 
       width: '100%', 
       hideLabel: true, 
       value: 'Some text' 
      }, 
      { 
       xtype: 'textfield', 
       width: '100%', 
       hideLabel: true, 
       value: 'Some other text' 

      }], 
      buttons: [{ 
       text: 'Highlight', 
       handler: function() { 
        Ext.getCmp('myform').getForm().getFields().each(function(field) { 
          field.inputEl.highlight("ffff9c", { 
          attr: "backgroundColor", 
          endColor: "ffc333", 
          easing: 'easeIn', 
          duration: 1000 
         }); 
        }); 
       } 
      }] 
     }); 
    } 
}); 

В этом рабочем примере вы меняете цвет фона. Стандартный класс css содержит фоновое изображение для полей ввода, поэтому вам нужно временно удалить его во время эффекта. Это можно сделать с помощью специального класса css, чтобы переопределить свойство background-image.

Надеюсь, это поможет