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

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

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

弹出代码

  1. Ext.define('tooltip', {
  2. extend: 'Ext.window.Window',
  3. displayText: '',
  4. header: '',
  5. xtype: 'myWin',
  6. width: 200,
  7. height: 100,
  8. layout: 'fit',
  9. customId:'',
  10. align:'center',
  11. cls: 'arrow-box',
  12. focusOnToFront: false,
  13. items: [{
  14. xtype : 'label',
  15. text: '',
  16. itemId:'lbldescription',
  17. height:20,
  18. width:183,
  19. style: 'padding-bottom: 8px; margin-top:-28px;',
  20. },{
  21. xtype: 'component',
  22. itemId:'hrefLink',
  23. autoEl: {
  24. tag: 'a',
  25. html: 'Learn about popup',
  26. href:'https://stackoverflow.com/questions/ask'
  27. },
  28. height:20,
  29. width:201,
  30. // style:{
  31. // textAlign:'left',
  32. // display:'block',
  33. // margin-top:36
  34. // },
  35. }],
  36. buttons: [{
  37. text: 'Close',
  38. width:'100%',
  39. style:{
  40. textAlign:'left',
  41. display:'block'
  42. },
  43. handler: function(){
  44. this.destroy();
  45. }
  46. },{
  47. text: 'Do not show again',
  48. //width:'100%',
  49. style:{
  50. textAlign:'right',
  51. display:'block'
  52. },
  53. handler: function(btn){
  54. localStorage.setItem(btn.up('myWin').customId, 1);
  55. this.destroy();
  56. }
  57. }],
  58. initComponent: function () {
  59. this.callParent();
  60. this.id = this.customId;
  61. this.setTitle(this.header);
  62. //Update text
  63. Ext.ComponentQuery.query('#lbldescription')[0].setText(this.displayText);
  64. },

})
主要js

  1. fieldLabel: Name
  2. labelClsExtra: 'x-form-item-label x-required',
  3. name: 'Name',
  4. itemId: 'Name',
  5. xtype: 'textfield',
  6. fieldCls: 'big',
  7. width: 650,
  8. enforceMaxLength: true,
  9. maxLength: 1000,
  10. isDisplayTooltip:false,
  11. listeners: {
  12. focus: function(field, ev) {
  13. var customId='nameTooltip';
  14. if ( field.isDisplayTooltip && parseInt(localStorage.getItem(customId)) != 1) {
  15. field.suspendEvent('blur');
  16. field.suspendEvent('focus');
  17. var displayMessage = 'This is popup';
  18. field.popup = Ext.create('tooltip',{
  19. displayText: displayMessage,
  20. customId:customId,
  21. header: Name
  22. });
  23. field.popup.showBy(field.el, 'l-r',[10-0]);
  24. field.focus();
  25. field.resumeEvent('focus');
  26. field.resumeEvent('blur');
  27. }
  28. },
  29. blur: function(field,ev) {
  30. if(ev.relatedTarget === null){
  31. field.popup.destroy();
  32. return;
  33. }
  34. if(ev.relatedTarget.id.indexOf('nameTooltip')<0 && ev.relatedTarget.parentNode.id.indexOf('nameTooltip') <0){
  35. if( field.popup != undefined && field.popup != null)field.popup.destroy();
  36. }
  37. },
cbeh67ev

cbeh67ev1#

我通过使用showAt(x,y)而不是showBy(field.el,'l-r',[10-0])解决了这个问题

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

相关问题