Как настроить ширину панели на основе другого компонента в калитке - PullRequest
Новая
       14

Как настроить ширину панели на основе другого компонента в калитке

1 голос
/ 18 мая 2011

Я занимаюсь разработкой приложения для калитки и хочу создать панель, для которой необходимо настроить ширину на основе другого элемента.

Разметка выглядит следующим образом: 

<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, чтобы получить ширину боковой панели,но как я могу отправить его обратно в калитку?

1 Ответ

1 голос
/ 19 мая 2011

Я нашел решение.Добавьте 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 мы создаем и добавляем фактическийпанель.

...