我的页面上有几个文本框、日期选择器、 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();
}
},
1条答案
按热度按时间cbeh67ev1#
我通过使用showAt(x,y)而不是showBy(field.el,'l-r',[10-0])解决了这个问题