Question

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

标记看起来像：

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

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

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

1 个答案: