extjs - 如何将日期列中的日期显示为链接，然后单击该链接如何显示日期选择器？

Question

我正在使用 Extjs 6.5.3 经典版。我有网格，其中有两个日期列。现在我想将该日期列值显示为链接，然后单击该链接我想显示日期选择器以选择日期。我不想使用行编辑器或单元格编辑器。我只想在单击日期值时显示日期选择器。单击日期选择器日期后，我想在网格中显示更新的值。

请帮忙。

先感谢您。

Answer 1

您可以这样做，首先，使用渲染器设置列：

{
    xtype:'column',
    header: "My Date",
    width: 90,
    sortable: true,     
    dataIndex: 'MyDateField',
    align: 'center',
    renderer: function (value,metaData){
            //Adjust date format as needed
            return '<a href="#" onclick="pickDate(event,'+metaData.record.data.ID+')" >'+value+'</a>';
    }
}

之后像这样声明pickDate函数：

var pickDate = function(e,id){        
    Ext.create('Ext.window.Window', {        
    modal: true,    
    bodyPadding: 0,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'datepicker',
        minDate: new Date(),
            handler: function(picker, date) {
                  // do something with the selected date                                            
            }
        }]
    }).show().setPosition(e.x,e.y);
}

有多种方法，例如，您可以“预先”创建此窗口并仅显示/定位/隐藏。