Java Ext GWT 2.2.5折叠日期选择器

我在应用程序中使用extgwt2.2.5

我想问你们，是否有可能创建一个日期选择器，它可以通过用户点击使用默认的框架工具来折叠和展开

请参见下面的示例：

我在extgwtexplorer演示中找不到类似的东西。 请参阅：

---

谢谢，Evgeniy

您可以尝试将日期选择器放在ContentPanel中，并将面板布局设置为FitLayout，以便日期选择器可以选择面板大小

然后只需将面板设置为可折叠，并将其属性“hideCollapseTool”设置为false

这将在ContentPanel中显示日期选择器，您可以使用面板标题上的折叠按钮将其折叠

例如：

DatePicker miDatePicker = new DatePicker();

ContentPanel miPanel= new ContentPanel();   // new panel

miPanel.setLayout(new FitLayout());         // set layout (so DatePicker resize inside)
miPanel.setAnimCollapse(false);             // set animation (optional)
miPanel.setHeading("Choose a date");        // set a header text          
miPanel.setCollapsible(true);               // allow panel to collapse
miPanel.setHideCollapseTool(false);         // show the collapse button
miPanel.setBorders(true);                   // show border of panel

miPanel.add(miDatePicker);

---

希望这有帮助

最后我创建了DateAndTimeField类，请参见：

public class DateAndTimeField extends LayoutContainer {

public static final String DATE_FORMAT = "MM/dd/yyyy";
public static final String TIME_AND_DATE_FORMAT = "MM/dd/yyyy HH:mm";
public static final String DATE_REGEX = "^\\d{4}/\\d{2}/\\d{2}$";
public static final String TIME_REGEX = "^\\d{2}:\\d{2}$";
private TextField<String> dateText;
private TextField<String> timeTextField;

public DateAndTimeField() {
    TableLayout tableLayout = new TableLayout();
    tableLayout.setColumns(4);
    tableLayout.setCellSpacing(5);
    this.setLayout(tableLayout);

    this.add(new Label("Date: "));
    this.add(getDateTextField());
    final DatePicker datePicker = getDatePicker();
    this.add(getDatePickerButton(datePicker));
    this.add(datePicker);
    this.add(new Label("Time: "));
    this.add(getTimeTextField());
    this.add(timeTextField);
}

private TextField<String> getTimeTextField() {
    if (timeTextField == null) {
        timeTextField = new TextField<String>();
        timeTextField.setEmptyText("HH:mm");
        timeTextField.setEnabled(false);
        timeTextField.setWidth(100);
        timeTextField.setValidator(new Validator() {
            @Override
            public String validate(Field<?> field, String value) {
                return value.matches(TIME_REGEX) ? null : "not a valid value";
            }
        });
    }
    return timeTextField;
}

private DatePicker getDatePicker() {
    final DatePicker datePicker = new DatePicker();
    datePicker.addListener(Events.Select, new Listener<ComponentEvent>() {

        public void handleEvent(ComponentEvent be) {
            String date = DateTimeFormat.getFormat(DATE_FORMAT).format(datePicker.getValue());
            dateText.setValue(date);
            datePicker.hide();
            timeTextField.setEnabled(true);
        }
    });
    datePicker.hide();
    return datePicker;
}

private Button getDatePickerButton(final DatePicker datePicker) {
    Button button = new Button();
    button.addSelectionListener(new SelectionListener<ButtonEvent>() {
        @Override
        public void componentSelected(ButtonEvent buttonEvent) {
            if (datePicker.isVisible()) {
                datePicker.hide();
            } else {
                datePicker.show();
            }
        }
    });
    button.setIcon(GXT.IMAGES.grid_groupBy());
    return button;
}

private TextField<String> getDateTextField() {
    if (dateText == null) {
        dateText = new TextField<String>();
        dateText.setWidth(100);
        dateText.setReadOnly(true);
        dateText.setEmptyText(DATE_FORMAT);
    }
    return dateText;
}

public Date getSelectedDate() {
    if (getDateTextField().getValue().matches(DATE_REGEX)) {
        StringBuilder dateAndTimeText = new StringBuilder(dateText.getValue());
        if (timeTextField.getValue().matches(TIME_REGEX)) {
            dateAndTimeText.append(" ").append(timeTextField.getValue());
        }
        return DateTimeFormat.getFormat(TIME_AND_DATE_FORMAT).parse(dateAndTimeText.toString());
    } else {
        return null;
    }
}

public void reset() {
    getDateTextField().clear();
    getTimeTextField().clear();
    getDatePicker().hide();
    getTimeTextField().setEnabled(false);
}

公共类DateAndTimeField扩展了LayoutContainer{
公共静态最终字符串日期\u格式=“MM/dd/yyyy”；
公共静态最终字符串时间和日期格式=“MM/dd/yyyy HH:MM”；
公共静态最终字符串DATE_REGEX=“^\\d{4}/\\d{2}/\\d{2}$”；
公共静态最终字符串时间_REGEX=“^\\d{2}:\\d{2}$”；
私有文本字段日期文本；
私有文本字段时间文本字段；
公共日期和时间字段（）{
TableLayout TableLayout=新的TableLayout（）；
tableLayout.setColumns（4）；
表布局。设置单元格间距（5）；
这个.setLayout（tableLayout）；
添加（新标签（“日期”）；
add（getDateTextField（））；
最终日期选择器DatePicker=getDatePicker（）；
add（getDatePickerButton（datePicker））；
添加（日期选择器）；
添加（新标签（“时间”）；
add（getTimeTextField（））；
this.add（timeTextField）；
}
私有TextField getTimeTextField（）{
if（timeTextField==null）{
timeTextField=新的TextField（）；
timeTextField.setEmptyText（“HH:mm”）；
timeTextField.setEnabled（false）；
timeTextField.setWidth（100）；
setValidator（新验证器（）{
@凌驾
公共字符串验证（字段、字符串值）{
返回值。匹配（TIME_REGEX）？null：“不是有效值”；
}
});
}
返回时间文本字段；
}
私有日期选择器getDatePicker（）{
最终日期选择器DatePicker=新日期选择器（）；
datePicker.addListener（Events.Select，new Listener（））{
公共无效handleEvent（组件事件be）{
字符串date=DateTimeFormat.getFormat（date_FORMAT）.FORMAT（datePicker.getValue（））；
dateText.setValue（日期）；
datePicker.hide（）；
timeTextField.setEnabled（真）；
}
});
datePicker.hide（）；
返回日期选择器；
}
私有按钮getDatePickerButton（最终日期选择器DatePicker）{
按钮按钮=新按钮（）；
addSelectionListener（新建SelectionListener（）{
@凌驾
已选择公共无效组件（ButtonEvent ButtonEvent）{
if（datePicker.isVisible（））{
datePicker.hide（）；
}否则{
datePicker.show（）；
}
}
});
setIcon（GXT.IMAGES.grid_groupBy（））；
返回按钮；
}
私有文本字段getDateTextField（）{
如果（dateText==null）{
dateText=新文本字段（）；
dateText.setWidth（100）；
dateText.setReadOnly（true）；
dateText.setEmptyText（日期格式）；
}
返回日期文本；
}
公共日期getSelectedDate（）{
如果（getDateTextField（）.getValue（）.matches）（日期\正则表达式））{
StringBuilder dateAndTimeText=新的StringBuilder（dateText.getValue（））；
如果（timeTextField.getValue（）.matches（TIME_REGEX））{
dateAndTimeText.append（“”.append（timeTextField.getValue（））；
}
return DateTimeFormat.getFormat（TIME和DATE格式）.parse（dateAndTimeText.toString（））；
}否则{
返回null；
}
}
公共无效重置（）{
getDateTextField（）.clear（）；
getTimeTextField（）.clear（）；
getDatePicker（）.hide（）；
getTimeTextField（）.setEnabled（false）；
}

---

}

这似乎是一个有趣的解决方案，但我需要看看当datePicker折叠时选择了什么日期。请看我提出的方法你的方法也很好。我相信创建自己的“定制组件”始终是最好的方式。伟大的不幸的是，我刚刚开始在Stackoverflow，还不能投票支持你的答案。回头见！