ExtJS 5.0 - добавление кнопки в качестве наложения на компонент

Question

Мы работаем с программным обеспечением, поставляемым третьей стороной, и нам не разрешено изменять его, он может использовать только переопределения.

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

У меня возникли проблемы с выравниванием наложения, вместо этого он отображается вверху слева на экране. Поэтому, конечно, он не соответствует текстовому вводу. Пример кода ниже, в этом случае реализован в представлении initComponent переопределение после вызова this.callParent([]);.

var viewport = Ext.ComponentQuery.query('viewport')[0]; 
var overlay = viewport.add({ 
    xtype: 'panel', 
    fullscreen: true, 
    left: 0, 
    top: 0, 
    width: 120, 
    height: 40, 
    items:[{ 
     xtype: 'button', 
     text: 'Find Address', 
     handler: function() { 
      alert('Got it!'); 
     } 
    }], 
    styleHtmlContent: true 
}); 
var textField = this.query('*[itemId=textField]')[0]; 
overlay.showBy(textField, 'c-c?'); 

Я пробовал использовать floating: true и множество других подходов.

Как только я получу его для правильной установки, есть ли способ правильно отреагировать кнопку на порядок вкладок? То есть, выйдите из текстового поля, затем нажмите кнопку фокуса?

Answer 1

Как я понимаю из вашего вопроса, у вас возникли проблемы с установкой позиции на компонент. Если это проблема, вы можете установить координату xy. Посмотрите на эту скрипку: https://fiddle.sencha.com/#fiddle/tpl

viewport.down('#idOverlay').setXY([150, 140]); 

Edit:

Ext.define('OverriddenViewport', { 
     override: 'ExampleViewPort', 
     initComponent: function() { 
      // Set up first 
      this.callParent([]); 
      this.add(overlay); 
      this.addListener('afterrender', function(viewport) { 
       viewport.down('#idOverlay').setXY([220,50]); 
       viewport.down('#idButton').addListener('blur', function(button) { 
        viewport.down('#idTextfield').focus(); 
        console.log('textfield is focussed'); 
       }); 
       viewport.down('#idTextfield').addListener('blur', function(button) { 
        viewport.down('#idButton').focus(); 
        console.log('button is focussed'); 
       }); 
      }); 
     } 
    }); 

Answer 2

Если вы можете получить доступ к источнику (просто посмотреть вокруг) вы, возможно, может создать переопределение соответствующего класса. Создайте переопределение и скопируйте весь код класса (form?) В свое переопределение.

Вот некоторая дополнительная информация о создании переопределения в ExtJS:
http://moduscreate.com/writing-ext-js-overrides/
https://sencha.guru/2014/12/04/abstract-vs-override/

В переопределении создать trigger (на поле вы хотите расширить) с функциональностью:

{ 
    fieldLabel: 'My Custom Field', 
    triggers: { 
     foo: { 
      cls: 'my-foo-trigger', 
      handler: function() { 
       console.log('foo trigger clicked'); 
      } 
     } 
    } 
}