一个日期范围选择框的设计 

这是一个日期范围选择框的设计，除了可以选择开始日期、结束日期之外。还要一些按钮用于快速选择日期范围：

源码

win_select_DateRange = Ext.extend(Ext.Window, {
    xtype: "window",
    title: "Date Range",
    width: 328,
    autoScroll: false,
    height: 360,
    bodyStyle: 'background:#DFE6F6;',
    modal: true,
    layout: "absolute",
    listeners: {
        'beforeshow': function () { },
        "afterrender": function () {
        }
    },
    set_param: function (param) {

    },
    buttonAlign: 'left',

    initComponent: function () {
        var winid = this.id;
        var x = 10;
        var y = 10;
        var lw = 90;
        var tw = 135;
        var rh = 28;
        var items_tmp = [];
        items_tmp.push({ xtype: "label", text: "Start Date:", x: x, y: y, width: tw });
        x = x + tw + 20;
        items_tmp.push({ xtype: "label", text: "End Date:", x: x, y: y, width: tw });
        x = 10;
        y = y + rh;
        items_tmp.push({ xtype: "datefield", id: winid + "StartDate", x: x, y: y - 3, width: tw });
        x = x + tw + 20;
        items_tmp.push({ xtype: "datefield", id: winid + "EndDate", x: x, y: y - 3, width: tw });

        var ss = ['Today', 'Yesterday', 'Today & Yesterday', 'This month', 'Last month', 'Last week', 'Last 2 days', 'Last 3 days', 'Last 7 days', 'Last 14 days', 'Last 30 days', 'Last 90 days', '1st to 15th of month', '15th to end of month', 'Last 3 full months', 'Last 6 full months'];

        var rowcount = Math.floor((ss.length - 1) / 2) + 1;
        x = 10;
        y = y + rh;
        var y_row_0 = y;
        for (var i = 0; i < ss.length; i++) {
            items_tmp.push({
                xtype: "button", text: ss[i], x: x, y: y - 3, width: tw, handler: function (btn) {
                    var win = Ext.getCmp(winid);
                    win.input.setValue(this.text);
                    win.close();
                }
            });
            y = y + rh;
            if (i == (rowcount - 1)) {
                x = x + tw + 20;
                y = y_row_0;
            }
        }

        this.items = items_tmp;
        this.buttons = [];
        this.buttons.push({
            text: "Clear", handler: function () {
                var win = Ext.getCmp(winid);
                win.input.setValue("");
            }
        }, "->", {
            text: "OK", handler: function () {
                var win = Ext.getCmp(winid);
                var d1 = Ext.getCmp(winid + "StartDate").getValue();
                var d2 = Ext.getCmp(winid + "EndDate").getValue();

                if (d1) {
                }
                else {
                    messagebox_show("Please input start date");
                    return;
                }
                if (d2) {
                }
                else {
                    messagebox_show("Please input end date");
                    return;
                }
                var s = d1.format("m/d/Y") + '-' + d2.format("m/d/Y");
                win.input.setValue(s);
                win.close();
            }
        }, {
            text: "Cancel", handler: function () {
                var win = Ext.getCmp(winid);
                win.close();
            }
        });
        win_select_DateRange.superclass.initComponent.call(this);
    }
})