Wicket生成ExtJS的组件（DateField）

最新推荐文章于 2024-08-23 08:26:04 发布

原创最新推荐文章于 2024-08-23 08:26:04 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Wicket ExtJS

Wicket笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种基于Apache Wicket框架实现日期选择器的方法。通过创建自定义的DateField组件，结合Ext JS库，实现了网页上的日期选择功能。该组件能够与Wicket的表单组件无缝集成，支持日期范围验证、格式设定等功能。

一，组件代码

DateField.java

package dncsoft.wicket.datepicker;

import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import org.apache.wicket.markup.html.form.FormComponentPanel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.Model;
import org.apache.wicket.util.resource.IResourceStream;
import org.apache.wicket.util.resource.PackageResourceStream;
import org.apache.wicket.velocity.markup.html.VelocityPanel;

public class DateField extends FormComponentPanel<String> {

    private static final long serialVersionUID = 1L;
    private Map<String, Object> map = new HashMap<String, Object>();

    public DateField(final String id, IModel<String> model) {
        super(id, model);
        init();
    }

    private void init() {
        map.put("value", getModel().getObject());
        map.put("id", getInputName());
        map.put("target", getInputName() + random());

        add(new VelocityPanel("javascript", Model.ofMap(map)) {
            private static final long serialVersionUID = 1L;

            @Override
            protected IResourceStream getTemplateResource() {
                return new PackageResourceStream(DateField.class, "DateField.js");
            }
        });
    }

    private String random() {
        Random rnd = new Random(System.currentTimeMillis());
        return Integer.toString(rnd.nextInt());
    }

    @Override
    protected void convertInput() {
        super.convertInput();
        String str = this.getConvertedInput();

        map.put("value", str);
    }
}

DateField.html

<wicket:panel><wicket:fragment wicket:id="javascript"></wicket:fragment></wicket:panel>

DateField.js

<span id="${target}"></span><script type="text/javascript">
new Ext.form.DateField(
  {id:'${id}', 
    vtype:'daterange', 
    format:'Y/m/d', 
    allowBlank:false, 
    anchor:'32%', 
    value:'${value}'}).render('${target}');
</script>

二，Page代码

DatePickerPage.java

package dncsoft.wicket.page;

import dncsoft.wicket.datepicker.DateField;

import org.apache.wicket.IClusterable;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.PropertyModel;

public class DatePickerPage extends WebPage {

    private static final long serialVersionUID = 1L;

    private class MyFormData implements IClusterable {
        private static final long serialVersionUID = 1L;

        private String startDate = "2011-12-12";

        @SuppressWarnings("unused")
        public void setStartDate(String startDate) {
            this.startDate = startDate;
        }

        @SuppressWarnings("unused")
        public String getStartDate() {
            return startDate;
        }
    }

    private class MyForm extends Form<MyFormData> {
        private static final long serialVersionUID = 1L;

        public MyForm(String id, IModel<MyFormData> model) {
            super(id, model);
            add(new DateField("startDate", new PropertyModel<String>(model, "startDate")));
        }
    }

    public DatePickerPage() {
        MyFormData bean = new MyFormData();
        CompoundPropertyModel<MyFormData> model = new CompoundPropertyModel<MyFormData>(bean);
        MyForm form = new MyForm("form", model);

        add(form);
    }

}

DatePickerPage.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portal Example</title>
<link rel="stylesheet" type="text/css" href="/wicket/html/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/wicket/html/css/Portal.css" />
<script type="text/javascript" src="/wicket/html/js/ext-base.js"></script>
<script type="text/javascript" src="/wicket/html/js/ext-all.js"></script>
</head>
<body>

<div>
<form wicket:id="form">
<wicket:fragment wicket:id="startDate">[startDate]</wicket:fragment>
<input type="submit" value="set" />
</form>
</div>

</body>
</html>

// END