Ext GWT 2.2.5折叠DatePicker

Question

我在我的应用程序中使用Ext GWT 2.2.5。

我想问你，是否可以创建DatePicker，可以使用默认框架工具通过用户点击折叠和扩展？

请看下面的例子：

我在Ext GWT Explorer Demo中找不到这样的东西。 请参阅：http://www.sencha.com/examples-2/#datepicker

谢谢，Evgeniy

Answer 1

您可以尝试将DatePicker放在ContentPanel中，并将面板布局设置为FitLayout，这样DatePicker将采用面板大小。

然后你只需要将面板设置为可折叠及其属性＆＃34; hideCollapseTool＆＃34;为假。

这将在ContentPanel中显示您的DatePicker，您可以使用面板标题上的折叠按钮将其折叠。

一个例子：

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

希望这有帮助！

Answer 2

最后我创建了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);
}

}