Window 弹出窗口不断改变它在 ext js 中从顶部开始的位置

Question

我的页面上几乎没有文本框、日期选择器、手风琴和下拉菜单。在页面加载时，当我从下拉列表中单击选项卡时，弹出窗口不会出现在特定位置。当我明确地单击文本框时，弹出窗口才会出现在一个完美的位置。但是这种行为是不断变化的。有时它会显示在正确的位置，有时则不会。名称文本框将根据条件（基于所选选项）可见。其他一些字段也显示弹出窗口，但显示正确。

弹出代码

Ext.define('tooltip', {
extend: 'Ext.window.Window',
displayText: '',
header: '',
xtype: 'myWin',
width: 200,
height: 100,  
layout: 'fit',    
customId:'',
align:'center',    
cls: 'arrow-box',  
focusOnToFront: false,        
items: [{
    xtype : 'label',
    text: '',
    itemId:'lbldescription',
    height:20,
    width:183,
    style: 'padding-bottom: 8px; margin-top:-28px;',      
 },{
    xtype: 'component',
    itemId:'hrefLink',
    autoEl: {
        tag: 'a',           
        html: 'Learn about popup',
        href:'https://whosebug.com/questions/ask'
    },
    height:20,
    width:201,
    // style:{
    //    textAlign:'left',
    //    display:'block',
    //    margin-top:36
    // },
    
 }],
 
 buttons: [{
    text: 'Close',
    width:'100%',
    style:{
       textAlign:'left',
       display:'block'
    },
    handler: function(){
         this.destroy();
        }
 },{
    text: 'Do not show again',
    //width:'100%',
    style:{
       textAlign:'right',
       display:'block'
    },
    handler: function(btn){           
        localStorage.setItem(btn.up('myWin').customId, 1);          
        this.destroy();  
    }
 }],

 initComponent: function () {
          
    this.callParent();      
   
    this.id = this.customId;        
    this.setTitle(this.header);
        
    //Update text
    Ext.ComponentQuery.query('#lbldescription')[0].setText(this.displayText);       
},

})

主要js

                    fieldLabel: Name
                    labelClsExtra: 'x-form-item-label x-required',
                    name: 'Name',
                    itemId: 'Name',
                    xtype: 'textfield',
                    fieldCls: 'big',
                    width: 650,
                    enforceMaxLength: true,
                    maxLength: 1000,
                    isDisplayTooltip:false,
                    listeners: { 
                        focus: function(field, ev) {                           
                            var customId='nameTooltip';                            
                           
                            if ( field.isDisplayTooltip && parseInt(localStorage.getItem(customId)) != 1) {  
                              
                                field.suspendEvent('blur');
                                field.suspendEvent('focus');
                                
                                var displayMessage = 'This is popup';
                                field.popup =  Ext.create('tooltip',{
                                    displayText: displayMessage,
                                    customId:customId,
                                    header: Name
                                });

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

                                field.resumeEvent('focus');                                  
                                field.resumeEvent('blur');  
                            }
                        },
                        blur: function(field,ev) {                             
                          
                             if(ev.relatedTarget === null){
                                field.popup.destroy();  
                                return;
                             }
                             if(ev.relatedTarget.id.indexOf('nameTooltip')<0 && ev.relatedTarget.parentNode.id.indexOf('nameTooltip') <0){
                                if( field.popup != undefined &&  field.popup != null)field.popup.destroy();                                  
                             }
                        },

Answer 1

我已经通过使用 showAt(x,y) 而不是 showBy(field.el,'l-r',[10-0])

解决了这个问题

  var elm =field.getEl();
  var x= elm.getX() + field.width+10;
  var height=field.getHeight();
  var getTopEnfOfInput=height+(height/2);
  var y= elm.getY()-getTopEnfOfInput;
  field.popup.showAt(x,y);

Window 弹出窗口不断改变它在 ext js 中从顶部开始的位置

Window pop up keeps changing it's position from top in ext js

textbox

position

extjs

window

popupwindow