将 css 应用到 window 弹出窗口并在 ext js 中的焦点离开时销毁它

Question

我想实现以下功能。下图中的问题是弹出箭头应该在文本框的边缘，我该如何实现？

当我点击文本框时它会立即调用模糊事件并销毁弹出窗口，当用户在控件外单击时如何销毁弹出窗口？

我的代码如下：

弹出窗口

Ext.define('tooltip', {
extend: 'Ext.window.Window',
displayText: '', 
xtype: 'myWin',
width: 200,
height: 50,     
layout: 'fit',
align:'center',    
cls: 'arrow-box', 
listeners: {
    show: function() {
        console.log('show');
        this.el.setStyle('left', 600); // Not applying           
    },
},
initComponent: function () {
 
    this.callParent();      
  
    this.html = '<div> hello this is test window</div>';               
},

Class:

 items: [
                {
                    fieldLabel: 'Name',
                    labelClsExtra: 'x-form-item-label x-required',
                    name: 'Name',
                    itemId: 'Name',
                    xtype: 'textfield',
                    fieldCls: 'big',
                    width: 650,
                    enforceMaxLength: true,
                    maxLength: 1000,                       
                    listeners: { 
                        focus: function(field) {                                
                           
                                field.suspendEvent('blur');
                                field.suspendEvent('focus');
                                
                               var displayMessage ='';
                                field.popup = field.popup  || Ext.create('tooltip',{
                                    displayText: displayMessage
                                });

                                field.popup.showBy(field.el, 'l-r');
                                field.focus();
                                field.resumeEvent('focus');
                                field.resumeEvent('blur');                                   
                            
                        },
                        blur: function(field) {
                            console.log('destroy');
                            if( field.popup != undefined &&  field.popup != null)field.popup.hide(); // It is being called immediately after focus event , so popup never comes
                        },                                                  
                 }

CSS

.arrow-box {
position: relative;
background: #fff;
border: 1px solid #859ba8;
overflow: visible;
padding: 30px;
}
.arrow-box:after, .arrow-box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow-box:after {
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 10px;
  margin-top: -10px;
}

.arrow-box:before {
  border-color: rgba(133, 155, 168, 0);
  border-right-color: #859ba8;
  border-width: 11px;
  margin-top: -11px;
}

.arrow-box .x-box-inner {
  display:none;
  height:0px !important;
}

.arrow-box .x-window-body {
  top : 0px !important;
  width: 200px !important;
}

Answer 1

答案是：不要使用show listener。

使用 showBy 中的 offset 更容易。

这里是 fiddle，其中包含您的所有答案以及您希望在弹出窗口中显示的文本的适当设置

popup.showBy(field.el, 'l-r', [10,0]);

将 css 应用到 window 弹出窗口并在 ext js 中的焦点离开时销毁它

Apply css to window popup and destroy it on focus leave in ext js

javascript

css

textbox

extjs

popover