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

一旦我将其正确定位，是否有办法让按钮正确响应标签顺序？也就是说，从文本字段中选择Tab，然后让按钮获得焦点？

Answer 1

正如我从您的问题中所理解的那样，您在为组件设置位置时遇到了麻烦。如果是问题，可以设置xy坐标。看看这个小提琴： 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

如果您可以访问源（只是环顾四周），您可以创建相应类的覆盖。创建一个覆盖，并将类的所有代码（表单？）复制到覆盖中。

这里有一些关于在ExtJ中创建覆盖的其他信息：
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 - 添加按钮作为组件的叠加层

2 个答案: