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

Question

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

标记如下所示：

<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 来获取侧边栏的宽度，但我如何将其发送回检票口？

Answer 1

我想出了一个解决方案。将 AjaxBehavior 添加到 widthSpan，如下所示：

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);
     }
 };

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