Posted on 2007-08-29 17:51
Jack L 阅读(1359)
评论(1) 编辑 收藏 所属分类:
JavaScript
在老版GWT中，PopupPanel有两个构造函数： public PopupPanel()； public PopupPanel(boolean autoHide)； 实例化我们的PopupPanel之后，可以设置显示的位置，然后调用show()显示。但是这样只能得到一个模态（modal）Panel，只要它处于可见（isVisible()返回true）状态，我们的页面就不能进行任何操作（除了已经运行起来的JS代码，像发送Ajax请求这样的后台操作），相当与整个Web应用因为显示该Panel而进入了暂停状态。 由于PopupPanel可以根据位置参数出现在页面任何地方，所以很适合于实现诸如页面角落上的提示框（比如在页面右上角显示“loading...”）等类似的小功能。但是这样的提示框不能暂停浏览器的运行，所以应该是一个非模态（non-modal）的Panel。于是我们通过一种方式来绕过没有适当构造函数的限制： 使用RootPanel.get().add(myPanel);来取代myPanel.show(); 这样就得到了一个非模态的Panel。 在新的GWT1.4中，PopupPanel有三个构造函数： public PopupPanel()； public PopupPanel(boolean autoHide)； public PopupPanel(boolean autoHide, boolean modal)； 我们看到，我们可以通过构造函数指定是否需要一个模态Panel。如果我们使用第三个构造函数，而且把第二个参数设置为false的话，当我们对该PopupPanel实例调用show()方法的时候，就会得到一个非模态的Panel。
但是，如果我们还要用RootPanel.get().add(myPanel)的话，浏览器将忽略我们设置的宽度，和弹出位置等信息，把myPanel添加到页面最下方一个元素的下面，而且其宽度与浏览器客户区的宽度相同。总之，绝不是你想要的结果。
下面给出一个在页面右上角实现消息提示框的方法。
1 private final PopupPanel infoB=new PopupPanel(false,false);//no auto-hide, non-modal popup
2 public void infoBoard(String info){
3 if(infoB!=null)
4 infoB.hide();
5 Label lb=new Label(info);
6 infoB.setWidget(lb);
7 infoB.show();
8 int width=infoB.getOffsetWidth();
9 infoB.hide();
10 int clientWidth=Window.getClientWidth();
11 infoB.setPopupPosition(clientWidth-width, 0);
12 infoB.show();
13 }
基本思路是，先设置要显示的消息（info），然后因为是在右上角显示，所以要取得消息框的宽度（width），并取得浏览器客户区的宽度（clientWidth），计算（clientWidth-width）就得到了消息框的x坐标（准确地说是左上角那一点的x坐标）。
7～9的代码好像很奇怪，但只有这样才能取得消息框的宽度。当PopupPanel处于不可见状态时，调用getOffsetWidth()必将返回0。因为浏览器不知道宽度。原因如下：
你的PopupPanel可能会被CSS修饰，可能通过百分比设置了宽度，也可能设置了边框等属性，所以无法得知到底占用了多少个像素的宽度。只有处于可见状态时才能得到其宽度。