解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法

最新推荐文章于 2023-11-24 10:33:38 发布
最新推荐文章于 2023-11-24 10:33:38 发布
阅读量2k 收藏
点赞数
分类专栏： EXTJS 文章标签： stylesheet function border express layout image

应用场景：
一个表格列表，点击表格上的某一行，弹出一个Ext.Window显示其他资料。（修改、显示详情等等）,如下图：

很多情况下我们只是使用Ext的某一些功能，如Ext.Window.在你的页面长度没有越过一页，即没有滚动条的时候，使用Ext.Window是不会有任何问题的。但当你的页面长度超过一页，有滚动条时，使用Ext.Window会出现以下两个问题：
你可以试用一下： http://extjs.org.cn/extjs/mydemo/0007_window_position_error.html

1、Ext.Window放大后，再点击关闭按钮，页面右边的滚动条会消失，出现一条白边，页面不能滚动了。如下图：

2、向下拖动页面至某一个地方，弹出一个Ext.Window，这个时候如果点击放大，窗体会放大，但位置在最顶上，这时候你什么也不能操作，只能重新刷新页面。如下图

解决办法其实很简单，只要在Window中添加两个listeners就可以了。

view plain copy to clipboard print ?
  1. listeners: {   
  2.     close:function(w){   
  3.         //关键部分：关闭窗口前先还原,滚动条才不会消失   
  4.         w.restore();   
  5.     },   
  6.     maximize:function(w){      
  7.         //关键部分：最大化后需要将窗口重新定位，否则窗口会从最顶端开始最大化                          
  8.         w.setPosition(document.body.scrollLeft,document.body.scrollTop);   
  9.     }   
  10. }  

 

演示(demo)地址在文章最后.

效果图如下：

源代码包括：0007_window_position.html
0007_window_position.html

view plain copy to clipboard print ?
  1. <html>   
  2. <head>   
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  4. <title>解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法</title>   
  5. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />   
  6. <link rel="stylesheet" type="text/css" href="../examples/examples.css" />   
  7. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>   
  8. <script type="text/javascript" src="../ext-all.js"></script>   
  9. <script type="text/javascript">   
  10. /*  
  11.  * Copyright(c) extjs.org.cn | jamblues  
  12.  * Power by Jamblues & Micheal  
  13.  *   
  14.  * <A href="http://extjs.org.cn" target=_blank>http://extjs.org.cn</A>  
  15.  */  
  16. Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif";    
  17. var tr_1 = "";   
  18. var class_1 = "";   
  19. function OpenWin(tr)   
  20. {   
  21.     //设置选中颜色开始   
  22.     if(tr_1 != "")   
  23.     {   
  24.     tr_1.style.backgroundColor = "";   
  25.     }   
  26.     tr_1 = tr;   
  27.     class_1 = tr.className;   
  28.     tr.style.backgroundColor = "#AECEF6";   
  29.     //设置选中颜色结束   
  30.        
  31.     Ext.onReady(function(){   
  32.         var win = new Ext.Window({                           
  33.                     layout:'fit',   
  34.                     width:480,   
  35.                     height:360,   
  36.                     resizable:true,   
  37.                     closeAction:'close',   
  38.                     plain: true,   
  39.                     maximizable: true,   
  40.                     listeners: {   
  41.                         close:function(w){   
  42.                             //关键部分：关闭窗口前先还原,滚动条才不会消失   
  43.                             w.restore();   
  44.                         },   
  45.                         maximize:function(w){      
  46.                             //关键部分：最大化后需要将窗口重新定位，否则窗口会从最顶端开始最大化                          
  47.                             w.setPosition(document.body.scrollLeft,document.body.scrollTop);   
  48.                         }   
  49.                     }   
  50.                 });               
  51.            win.show();   
  52.     });   
  53. }   
  54.   
  55. </script>   
  56.   
  57. </head>   
  58. <body>   
  59. <h1>解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法</h1>   
  60. <p>应用场景：一个表格列表，点击表格上的某一行，弹出一个Ext.Window显示其他资料。（修改、显示详情等等）   
  61. <br />很多情况下我们只是使用Ext的某一些功能，如Ext.Window.在你的页面长度没有越过一页，即没有滚动条的时候，使用Ext.Window是不会有任何问题的。但当你的页面长度超过一页，有滚动条时，使用Ext.Window会出现以下两个问题：   
  62. <br />   
  63. 1、Ext.Window放大后，再点击关闭按钮，页面右边的滚动条会消失，出现一条白边，页面不能滚动了。如下图：   
  64. <br />   
  65. 2、向下拖动页面至某一个地方，弹出一个Ext.Window，这个时候如果点击放大，窗体会放大，但位置在最顶上，这时候你什么也不能操作，只能重新刷新页面。   
  66. <br>   
  67.   
  68. <div id="data-gird">   
  69.   *双击行弹出新窗口   
  70.   <table width="100%" border="1" cellpadding="0" cellspacing="5">   
  71.     <tr>   
  72.       <th scope="col" style="text-align:center; font-weight:bold;">Company</th>   
  73.       <th scope="col" style="text-align:center; font-weight:bold;">Price</th>   
  74.       <th scope="col" style="text-align:center; font-weight:bold;">Change</th>   
  75.       <th scope="col" style="text-align:center; font-weight:bold;">% Change</th>   
  76.       <th scope="col" style="text-align:center; font-weight:bold;">Last Updated</th>   
  77.     </tr>   
  78.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  79.       <td>3m Co</td>   
  80.       <td>71.72</td>   
  81.       <td>0.02</td>   
  82.       <td>0.03</td>   
  83.       <td>9/1 12:00am</td>   
  84.     </tr>   
  85.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  86.       <td>Alcoa Inc</td>   
  87.       <td>29.01</td>   
  88.       <td>0.42</td>   
  89.       <td>1.47</td>   
  90.       <td>9/1 12:00am</td>   
  91.     </tr>   
  92.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  93.       <td>Altria Group Inc</td>   
  94.       <td>83.81</td>   
  95.       <td>0.28</td>   
  96.       <td>0.34</td>   
  97.       <td>9/1 12:00am</td>   
  98.     </tr>   
  99.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  100.       <td>American Express Company</td>   
  101.       <td>52.55</td>   
  102.       <td>0.01</td>   
  103.       <td>0.02</td>   
  104.       <td>9/1 12:00am</td>   
  105.     </tr>   
  106.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  107.       <td>American International Group, Inc.</td>   
  108.       <td>64.13</td>   
  109.       <td>0.31</td>   
  110.       <td>0.49</td>   
  111.       <td>9/1 12:00am</td>   
  112.     </tr>   
  113.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  114.       <td>AT&T Inc.</td>   
  115.       <td>31.61</td>   
  116.       <td>-0.48</td>   
  117.       <td>-1.54</td>   
  118.       <td>9/1 12:00am</td>   
  119.     </tr>   
  120.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  121.       <td>Boeing Co.</td>   
  122.       <td>75.43</td>   
  123.       <td>0.53</td>   
  124.       <td>0.71</td>   
  125.       <td>9/1 12:00am</td>   
  126.     </tr>   
  127.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  128.       <td>Caterpillar Inc.</td>   
  129.       <td>67.27</td>   
  130.       <td>0.92</td>   
  131.       <td>1.39</td>   
  132.       <td>9/1 12:00am</td>   
  133.     </tr>   
  134.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  135.       <td>Citigroup, Inc.</td>   
  136.       <td>49.37</td>   
  137.       <td>0.02</td>   
  138.       <td>0.04</td>   
  139.       <td>9/1 12:00am</td>   
  140.     </tr>   
  141.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  142.       <td>E.I. du Pont de Nemours and Company</td>   
  143.       <td>40.48</td>   
  144.       <td>0.51</td>   
  145.       <td>1.28</td>   
  146.       <td>9/1 12:00am</td>   
  147.     </tr>   
  148.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  149.       <td>Exxon Mobil Corp</td>   
  150.       <td>68.1</td>   
  151.       <td>-0.43</td>   
  152.       <td>-0.64</td>   
  153.       <td>9/1 12:00am</td>   
  154.     </tr>   
  155.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  156.       <td>General Electric Company</td>   
  157.       <td>34.14</td>   
  158.       <td>-0.08</td>   
  159.       <td>-0.23</td>   
  160.       <td>9/1 12:00am</td>   
  161.     </tr>   
  162.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  163.       <td>General Motors Corporation</td>   
  164.       <td>30.27</td>   
  165.       <td>1.09</td>   
  166.       <td>3.74</td>   
  167.       <td>9/1 12:00am</td>   
  168.     </tr>   
  169.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  170.       <td>Hewlett-Packard Co.</td>   
  171.       <td>36.53</td>   
  172.       <td>-0.03</td>   
  173.       <td>-0.08</td>   
  174.       <td>9/1 12:00am</td>   
  175.     </tr>   
  176.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  177.       <td>Honeywell Intl Inc</td>   
  178.       <td>38.77</td>   
  179.       <td>0.05</td>   
  180.       <td>0.13</td>   
  181.       <td>9/1 12:00am</td>   
  182.     </tr>   
  183.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  184.       <td>Intel Corporation</td>   
  185.       <td>19.88</td>   
  186.       <td>0.31</td>   
  187.       <td>1.58</td>   
  188.       <td>9/1 12:00am</td>   
  189.     </tr>   
  190.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  191.       <td>International Business Machines</td>   
  192.       <td>81.41</td>   
  193.       <td>0.44</td>   
  194.       <td>0.54</td>   
  195.       <td>9/1 12:00am</td>   
  196.     </tr>   
  197.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  198.       <td>Johnson & Johnson</td>   
  199.       <td>64.72</td>   
  200.       <td>0.06</td>   
  201.       <td>0.09</td>   
  202.       <td>9/1 12:00am</td>   
  203.     </tr>   
  204.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  205.       <td>JP Morgan & Chase & Co</td>   
  206.       <td>45.73</td>   
  207.       <td>0.07</td>   
  208.       <td>0.15</td>   
  209.       <td>9/1 12:00am</td>   
  210.     </tr>   
  211.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  212.       <td>McDonald's Corporation</td>   
  213.       <td>36.76</td>   
  214.       <td>0.86</td>   
  215.       <td>2.4</td>   
  216.       <td>9/1 12:00am</td>   
  217.     </tr>   
  218.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  219.       <td>Merck & Co., Inc.</td>   
  220.       <td>40.96</td>   
  221.       <td>0.41</td>   
  222.       <td>1.01</td>   
  223.       <td>9/1 12:00am</td>   
  224.     </tr>   
  225.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  226.       <td>Microsoft Corporation</td>   
  227.       <td>25.84</td>   
  228.       <td>0.14</td>   
  229.       <td>0.54</td>   
  230.       <td>9/1 12:00am</td>   
  231.     </tr>   
  232.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  233.       <td>Pfizer Inc</td>   
  234.       <td>27.96</td>   
  235.       <td>0.4</td>   
  236.       <td>1.45</td>   
  237.       <td>9/1 12:00am</td>   
  238.     </tr>   
  239.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  240.       <td>The Coca-Cola Company</td>   
  241.       <td>45.07</td>   
  242.       <td>0.26</td>   
  243.       <td>0.58</td>   
  244.       <td>9/1 12:00am</td>   
  245.     </tr>   
  246.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  247.       <td>The Home Depot, Inc.</td>   
  248.       <td>34.64</td>   
  249.       <td>0.35</td>   
  250.       <td>1.02</td>   
  251.       <td>9/1 12:00am</td>   
  252.     </tr>   
  253.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  254.       <td>The Procter & Gamble Company</td>   
  255.       <td>61.91</td>   
  256.       <td>0.01</td>   
  257.       <td>0.02</td>   
  258.       <td>9/1 12:00am</td>   
  259.     </tr>   
  260.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  261.       <td>United Technologies Corporation</td>   
  262.       <td>63.26</td>   
  263.       <td>0.55</td>   
  264.       <td>0.88</td>   
  265.       <td>9/1 12:00am</td>   
  266.     </tr>   
  267.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  268.       <td>Verizon Communications</td>   
  269.       <td>35.57</td>   
  270.       <td>0.39</td>   
  271.       <td>1.11</td>   
  272.       <td>9/1 12:00am</td>   
  273.     </tr>   
  274.     <tr style='cursor:pointer;' οndblclick='OpenWin(this);'>   
  275.       <td>Wal-Mart Stores, Inc.</td>   
  276.       <td>45.45</td>   
  277.       <td>0.73</td>   
  278.       <td>1.63</td>   
  279.       <td>9/1 12:00am</td>   
  280.     </tr>   
  281.   </table>   
  282. </div>   
  283.   
  284. <br />   
  285.   
  286. </body>   
  287. </html>  

 

演示(demo)地址:
有错误的地址：
http://extjs.org.cn/extjs/mydemo/0007_window_position_error.html
正确的地址：
http://extjs.org.cn/extjs/mydemo/0007_window_position.html

萧逸2005
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
ExtJs2 设置Ext.Window打开默认最大化
zbzhangzi的专栏
04-27 1887
var myWin = new Ext.Window({ layout: 'fit', //也可以不设置 width: 600, height: 400, ...... });  打开窗口函数中   //貌似父窗口的宽高度 var vs = Ext.getBody().getViewSize(); myWin.setSize(v...
Extjs grid panel自带滚动条失效的解决方法
10-25
对gridPanel中的stroe数据进行过滤，所以有时候总是导致gridPanel自身所带的scrollbar失效，好了，现在来说说怎么解决scrollbar失效
窗口（Ext.Window）
程序员的天堂
05-18 577
Ext.Window扩展自Ext.Panel，其xtype值为window。   1、主要配置项：      closable：是否允许关闭窗口，默认为true。      closeAction：关闭窗口的动作，包括以下两种：            close：从DOM删除窗口，销毁窗口及其所属组件，窗口不再可用，重新显示需要调用show方法。此为默认值。            hide：通...
Ext window 相对位置
西葫抓鱼
12-05 617
var win = Ext.create('Ext.Window', {        title: 'Right Header, plain: true',        width: 400,        height: 50,        layout: 'fit',        items: {            border: false        }    });    ...
Ext.windows.Windows中autoScroll:true 配置无效，不出现滚动条
一只特立独行的猿—进化的博客
08-30 6133
/**  * Created by jackchen on 2017/8/15.  */ Ext.define('admin.view.view.detail.ViewDetailLinkageList', {     extend: 'Ext.window.Window',     alias: 'widget.viewDetailLinkageList',     layout:
Extjs的Window在IE6中滚动条失效，表单太大 当出现滚动条 时候会出现window和form错位
东亮博客
02-07 3892
在Win全局定义中加上下面这个就行： bodyStyle  : 'position:relative'     var windt1 = new Ext.Window({ title: ' ', width: 800, height: 250, plain: true,
window硬盘管理
最新发布
weixin_65036715的博客
11-24 1228
磁盘清理是指清除计算机硬盘上的垃圾文件、临时文件、无用文件等,以释放硬盘空间,提高计算机性能。（1）磁盘(disk)是由表面涂有磁性物质的金属或塑料构成的圆型盘片(platter),通过一个称为磁头(head)的导体线圈从磁盘中读取数据。（1）可以点击开始菜单，鼠标右键点击“磁盘管理”即可进行分区管理，有些新电脑是一个硬盘就只有一个C盘分区的；2、打开计算机管理->存储->磁盘管理 下拉垂直流滚动条,确认得到新的未联机3个硬盘。3、在未联机磁盘上按右键，再点联机 重复操作,确认得到新的未初始化的3个硬盘。
tkinter 多窗口显示和先验证后登录软件界面的案例
12-01 1204
#!/usr/bin/python3.7 # -*- coding: utf-8 -*- import tkinter as tk from tkinter import ttk #tk的部件进阶 from tkinter import scrolledtext #滚动条文本 from tkinter import Menu #菜单栏 from tkinter import messagebox as msg #消息弹框 from tkinter import Tk # from tkinter .
Ext经典案例解析：后台框架与窗口设计
"本资源是一份关于Ext（一个流行的JavaScript UI库）的经典案例讲解文档，主要针对Ext组件和布局的深入解析，适合开发人员参考和学习。文档首先介绍了如何使用Ext创建一个具有窗口布局的GridPanel，包括设置属性如`...
Extjs4.0.7 Formpanel 中各组件属性详解--（持续更新）
热门推荐
全欣 的专栏
06-26 1万+
Ext.form.ComboBox配置表: allQuery String 发往服务器查询全部信息的查询字符串(默认'') displayField String 被显示在下拉框中字段名 editable Boolean 设置下拉框是否可以编辑(默认true) forceSelection Boolean true输入值必须在列表中存
Extjs自动最大化panel
12-11
类似extjs中viewport的panel viewport只能渲染到body,而这个panel可以渲染到任何html元素,并且这个panel会自动变大!自动填充到最大化
Extjs gridpanel 出现横向滚动条问题的解决方法
10-28
Extjs gridpanel 出现横向滚动条问题的解决方法，在gridpanel中加入以下代码即可。
Extjs4.0 列隐藏和滚动条动态加载
12-17
Extjs4.0 实现列隐藏，显示和滚动条动态加载，可以直接跑的代码
Extjs使用Window最小化窗口
08-05
自己做的，关于EXTJS 实现最下化功能，点击新建窗口，能创建一个窗口，并在工具条里新建一个那妞与之对应，点击按钮实现最小化，再次点击按钮还原窗口。是我花了三的时间研究出来的，与大家分享！！
ext的弹出窗口加载时会最大化，然后点击缩小可以将其变为开始配置的宽高
我叫周希望的博客
09-09 3490
ext弹出窗口自动最大化，点击缩小之后恢复到配置属性 因为这样才能够在弹出窗口的右上角加上最大化按钮，如图： 然后根据你的name属性，来找到当前的对象，有一个maximize方法，在初始化的时候执行该方法，就相当于点击了上图的最大化按钮，所以一加载的时候会将弹出框口撑到全
ExtJs Panel 滚动条设置
shenzhen_zsw的专栏
10-07 6015
设置autoscroll:true同时出现横向和纵向滚动条。 不要设置autoscroll属性，或者autoscroll:false，然后设置bodyStyle : 'overflow-x:hidden; overflow-y:scroll'。   1 bodyStyle :'overflow-x:hidden;overflo
extjs中滚动条属性_前端分享，36个工作中常用的JavaScript函数片段
weixin_28455801的博客
12-03 157
数组 Array数组去重function noRepeat(arr) { return [...new Set(arr)];}查找数组最大function arrayMax(arr) { return Math.max(...arr);}查找数组最小function arrayMin(arr) { return Math.min(...arr);}返回已 size 为长度的数组分割的原数组f...
extjs中滚动条属性_ExtJS 4之 控制显示隐藏滚动条、隐藏横向滚动条
weixin_35884854的博客
02-06 1223
ExtJS 都是通过配置完成功能，滚动条也不例外，ExtJS默认是隐藏滚动条，我们来看看怎么显示出来，还是引用之前的例子：Ext.create('Ext.panel.Panel',{title:'控制面板',id:'newpanel',width:400,autoScroll：true,height:400,html:'Hi',renderTo:Ext.getBody()});从上面代码，高亮部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值