弹出窗口不断更改其在extjs中的位置

yshpjwxd  于 2022-09-26  发布在  其他
关注(0)|答案(1)|浏览(193)

我的页面上有几个文本框、日期选择器、 accordion 和下拉菜单。在页面加载时,当我从下拉菜单中单击选项卡时,弹出窗口不会出现在特定位置。当我明确单击文本框时,弹出窗口就会出现在一个完美的位置。但这种行为正在不断改变。有时它会显示在正确的位置,有时则不会。根据条件(根据所选选项),“名称”文本框将可见。其他一些字段也显示弹出窗口,但显示正确。

弹出代码

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();                                  
                             }
                        },
cbeh67ev

cbeh67ev1#

我通过使用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);

相关问题