Question

我有一个日期选择器，并且添加了一个额外的按钮。单击该按钮后，我设法关闭了日期选择器。我唯一想要的是选择日期后，日期选择器应保持打开状态。

如何实现？

我的代码：

new Ext.form.DateField({
    renderTo: this.id,
    cls: 'next-rev-input',
    name: 'date_' + this.id,
    id: 'date_' + this.id,
    width: 0,
    listeners: {
        'select': function (e) {},
        render: function (field) {
            var me = this,
                trigger = me.trigger;
            trigger.on('click', function () {
                if (me.menu.picker) {
                    var btn = new Ext.Button({
                        renderTo: me.menu.picker.getEl().child('td.x-date-bottom', true),
                        text: 'Save',
                        handler: function () {
                            var topic_id = field.id.substring(12);
                            var selectedDate = field.getValue();
                            var formatedSelectedDate = selectedDate.format("M d, Y");
                            me.menu.picker.getEl().parent('div.x-menu-floating').setStyle('visibility', 'hidden');
                            Ext.select('.x-shadow').setStyle('visibility', 'hidden');
                            var API = helpiq.api.alltopics;
                            API.updateRevDate(topic_id, selectedDate, {
                                scope: this,
                                success: function (rs) {
                                    Ext.select('#date' + topic_id).update(formatedSelectedDate);
                                }
                            });
                        }
                    });
                }
            }, null, {
                single: true
            });
        }
        // change: function(){
        // console.log(this.id);
        // }
    }
});

Answer 1

此问题的正确解决方案是：

onSelect: function (m, d) {
    this.setValue(d);
    this.fireEvent('select', this, d);
    return;
}

Answer 2

@ beso9595的答案中的一些补充：

您可以覆盖Ext.form.DateField类的onSelect方法，如下所示：

代码段：

{
    xtype: 'datefield',
    anchor: '100%',
    fieldLabel: 'To',
    name: 'to_date',
    value: new Date(), // defaults to today
    onSelect: function (m, d) {
        var me = this;

        me.setValue(d);
        me.rawDate = d;
        me.fireEvent('select', me, d);

        // Focus the inputEl first and then collapse. We configure 
        // the picker not to revert focus which is a normal thing to do 
        // for floaters; in our case when the picker is focusable it will 
        // lead to unexpected results on Tab key presses. 
        // Note that this focusing might happen synchronously during Tab 
        // key handling in the picker, which is the way we want it. 
        // me.onTabOut(m); // Commented this line as in this function the collapse of the picker is called
    }
}

Working Example

希望这会帮助/指导您。

Answer 3

您可以覆盖Ext.form.DateField类的onSelect方法，并在顶部键入return，以防止其执行。

onSelect: function (m, d) {
    return; //this ends the function execution
    this.setValue(d);
    this.fireEvent('select', this, d);
    this.menu.hide();
}

这里是FIDDLE

在Ext JS 3.4中选择日期后如何停止关闭datepicker

3 个答案: