如何根据检票口中的另一个组件调整面板宽度答案

【问题标题】：How to adjust panel width based on another component in wicket如何根据检票口中的另一个组件调整面板宽度
【发布时间】：2011-05-18 19:40:29
【问题描述】：

我正在开发一个检票口应用程序，并希望创建一个需要根据另一个元素调整宽度的面板。

标记看起来像：

<div wicket:id="lazyPanel" style="float: left;"></div>
<div wicket:id="widthSpan" style="float: right; width: 30%;"></div>

相关的java代码是：

final WebMarkupContainer widthSpan = new WebMarkupContainer("widthSpan");
add(widthSpan);
add(new AjaxLazyLoadPanel("lazyPanel") {
     public Component getLazyLoadComponent(String markupId) {
          // calculate the width based on widthSpan
          int width = 1000 - widthOf(sidebar);
          return new MyPanel(markupId, width);
     }
});

我知道我可以使用一些 javascript 来获取侧边栏的宽度，但是如何将它发送回 wicket？

【问题讨论】：

标签： javascript html css ajax wicket

【解决方案1】：

我想出了一个解决办法。给widthSpan添加一个AjaxBehavior，比如：

widthSpan.add(new AbstractDefaultAjaxBehavior() {
     @Override
     protected CharSequence getCallbackScript() {
         return generateCallbackScript("wicketAjaxGet('" + getCallbackUrl() + 
                      "&ExpectedWidth=' + expectedWidth");
     }

     @Override
     public void renderHead(Component component, IHeaderResponse response) {
         super.renderHead(component, response);
         StringBuffer sb = new StringBuffer();
         sb.append("var expectedWidth = $('#")
           .append(getComponent().getMarkupId())
           .append("').width();");
         sb.append(getCallbackScript());
         response.renderOnDomReadyScript(sb.toString());
     }

     @Override
     protected void respond(AjaxRequestTarget target) {
         int width = RequestCycle.get().getRequest().getQueryParameters()
              .getParameterValue("ExpectedWidth").toInt(280);
         Component lazy = createComponent("lazyPanel", 1000 - width);
         target.add(lazy);
     }
 };

在这里，我们使用一个行为来添加一个查询参数 ExpectedWidth，它将从一个 jquery 脚本中检索，并在响应函数中，我们创建并添加实际的面板。

【讨论】：