窗口弹出不断将其更改为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://stackoverflow.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,'lr',[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);