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

Posted 周六, 09/20/2008 - 12:08 by admin

应用场景：
一个表格列表，点击表格上的某一行，弹出一个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就可以了。

listeners: {
	close:function(w){
		//关键部分：关闭窗口前先还原,滚动条才不会消失
		w.restore();
	},
	maximize:function(w){   
		//关键部分：最大化后需要将窗口重新定位，否则窗口会从最顶端开始最大化                       
		w.setPosition(document.body.scrollLeft,document.body.scrollTop);
	}
}

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

效果图如下：

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../examples/examples.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
/*
 * Copyright(c) extjs.org.cn | jamblues
 * Power by Jamblues & Micheal
 * 
 * http://extjs.org.cn
 */
Ext.BLANK_IMAGE_URL = "../../resources/images/default/s.gif"; 
var tr_1 = "";
var class_1 = "";
function OpenWin(tr)
{
	//设置选中颜色开始
	if(tr_1 != "")
	{
	tr_1.style.backgroundColor = "";
	}
	tr_1 = tr;
	class_1 = tr.className;
	tr.style.backgroundColor = "#AECEF6";
	//设置选中颜色结束
	
	Ext.onReady(function(){
		var win = new Ext.Window({                        
					layout:'fit',
					width:480,
					height:360,
					resizable:true,
					closeAction:'close',
					plain: true,
					maximizable: true,
					listeners: {
						close:function(w){
							//关键部分：关闭窗口前先还原,滚动条才不会消失
							w.restore();
						},
						maximize:function(w){   
							//关键部分：最大化后需要将窗口重新定位，否则窗口会从最顶端开始最大化                       
							w.setPosition(document.body.scrollLeft,document.body.scrollTop);
						}
					}
				});            
           win.show();
	});
}

</script>

</head>
<body>
<h1>解决Ext.Window放大关闭后滚动条消失和滚动页面时最大化Window位置的方法</h1>
<p>应用场景：一个表格列表，点击表格上的某一行，弹出一个Ext.Window显示其他资料。（修改、显示详情等等）
<br />很多情况下我们只是使用Ext的某一些功能，如Ext.Window.在你的页面长度没有越过一页，即没有滚动条的时候，使用Ext.Window是不会有任何问题的。但当你的页面长度超过一页，有滚动条时，使用Ext.Window会出现以下两个问题：
<br />
1、Ext.Window放大后，再点击关闭按钮，页面右边的滚动条会消失，出现一条白边，页面不能滚动了。如下图：
<br />
2、向下拖动页面至某一个地方，弹出一个Ext.Window，这个时候如果点击放大，窗体会放大，但位置在最顶上，这时候你什么也不能操作，只能重新刷新页面。
<br>

<div id="data-gird">
  *双击行弹出新窗口
  <table width="100%" border="1" cellpadding="0" cellspacing="5">
    <tr>
      <th scope="col" style="text-align:center; font-weight:bold;">Company</th>
      <th scope="col" style="text-align:center; font-weight:bold;">Price</th>
      <th scope="col" style="text-align:center; font-weight:bold;">Change</th>
      <th scope="col" style="text-align:center; font-weight:bold;">% Change</th>
      <th scope="col" style="text-align:center; font-weight:bold;">Last Updated</th>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>3m Co</td>
      <td>71.72</td>
      <td>0.02</td>
      <td>0.03</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Alcoa Inc</td>
      <td>29.01</td>
      <td>0.42</td>
      <td>1.47</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Altria Group Inc</td>
      <td>83.81</td>
      <td>0.28</td>
      <td>0.34</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>American Express Company</td>
      <td>52.55</td>
      <td>0.01</td>
      <td>0.02</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>American International Group, Inc.</td>
      <td>64.13</td>
      <td>0.31</td>
      <td>0.49</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>AT&T Inc.</td>
      <td>31.61</td>
      <td>-0.48</td>
      <td>-1.54</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Boeing Co.</td>
      <td>75.43</td>
      <td>0.53</td>
      <td>0.71</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Caterpillar Inc.</td>
      <td>67.27</td>
      <td>0.92</td>
      <td>1.39</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Citigroup, Inc.</td>
      <td>49.37</td>
      <td>0.02</td>
      <td>0.04</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>E.I. du Pont de Nemours and Company</td>
      <td>40.48</td>
      <td>0.51</td>
      <td>1.28</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Exxon Mobil Corp</td>
      <td>68.1</td>
      <td>-0.43</td>
      <td>-0.64</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>General Electric Company</td>
      <td>34.14</td>
      <td>-0.08</td>
      <td>-0.23</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>General Motors Corporation</td>
      <td>30.27</td>
      <td>1.09</td>
      <td>3.74</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Hewlett-Packard Co.</td>
      <td>36.53</td>
      <td>-0.03</td>
      <td>-0.08</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Honeywell Intl Inc</td>
      <td>38.77</td>
      <td>0.05</td>
      <td>0.13</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Intel Corporation</td>
      <td>19.88</td>
      <td>0.31</td>
      <td>1.58</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>International Business Machines</td>
      <td>81.41</td>
      <td>0.44</td>
      <td>0.54</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Johnson & Johnson</td>
      <td>64.72</td>
      <td>0.06</td>
      <td>0.09</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>JP Morgan & Chase & Co</td>
      <td>45.73</td>
      <td>0.07</td>
      <td>0.15</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>McDonald's Corporation</td>
      <td>36.76</td>
      <td>0.86</td>
      <td>2.4</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Merck & Co., Inc.</td>
      <td>40.96</td>
      <td>0.41</td>
      <td>1.01</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Microsoft Corporation</td>
      <td>25.84</td>
      <td>0.14</td>
      <td>0.54</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Pfizer Inc</td>
      <td>27.96</td>
      <td>0.4</td>
      <td>1.45</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>The Coca-Cola Company</td>
      <td>45.07</td>
      <td>0.26</td>
      <td>0.58</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>The Home Depot, Inc.</td>
      <td>34.64</td>
      <td>0.35</td>
      <td>1.02</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>The Procter & Gamble Company</td>
      <td>61.91</td>
      <td>0.01</td>
      <td>0.02</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>United Technologies Corporation</td>
      <td>63.26</td>
      <td>0.55</td>
      <td>0.88</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Verizon Communications</td>
      <td>35.57</td>
      <td>0.39</td>
      <td>1.11</td>
      <td>9/1 12:00am</td>
    </tr>
    <tr style='cursor:pointer;' ondblclick='OpenWin(this);'>
      <td>Wal-Mart Stores, Inc.</td>
      <td>45.45</td>
      <td>0.73</td>
      <td>1.63</td>
      <td>9/1 12:00am</td>
    </tr>
  </table>
</div>

<br />

</body>
</html>

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

关键字:
- 技巧大集合

要发表评论，请先登录

直接在页面上显示日期控件的方法(1)

直接在页面上显示富文本编辑器

使用百分比设置GridPannel宽度的方法（1）

使用百分比设置GridPannel宽度的方法（2）

去除s.gif的影响

直接在页面上显示日期控件的方法(2)

内嵌Json的绑定GridPanel方法

广告合作

Sencha相关书籍

导航

聚合

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

相关文章