ExtJS 5.0 - 添加按钮作为组件的覆盖

Question

我们正在使用第三方提供的软件，我们不能修改它，只能使用覆盖。

我想创建一个新按钮并将其覆盖在文本输入的顶部，以便它们靠在一起。

我无法对齐叠加层，而是它显示在屏幕的左上角。因此，它当然不会与文本输入对齐。示例代码如下，在这种情况下，在调用 this.callParent([]); 之后在视图 initComponent 覆盖中实现。

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 和许多其他方法。

一旦我把它放到正确的位置，有没有办法让按钮正确响应 Tab 键顺序？也就是说，从文本字段中跳出，然后让按钮获得焦点？

Answer 1

根据您的问题我了解到，您在为组件设置位置时遇到了问题。如果是问题，您可以设置 xy 坐标。看看这个 fiddle： https://fiddle.sencha.com/#fiddle/tpl

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

编辑：

    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

如果您可以访问源代码（只是为了四处看看），您也许可以创建相应 class 的覆盖。创建覆盖，并将 class（表单？）的所有代码复制到覆盖中。

这里有一些关于在 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');
            }
        }
    }
}

ExtJS 5.0 - 添加按钮作为组件的覆盖

ExtJS 5.0 - adding button as overlay to component

javascript

extjs

extjs5