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

Question

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

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

我无法对齐叠加层，而是它出现在屏幕的左上角。因此，它当然不会与文本输入对齐。示例代码如下，在本例中，在调用 this.callParent([]); 之后在 View 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');
                });
            });
        }
    });