javascript - ExtJS 4 日期选择器。着色细胞

Question

我需要帮助，我试图能够将不同的颜色应用于 Extjs4 DatePicker 组件的单元格，例如，如果特定日期有未完成的任务将这一天标记为红色。

提前致谢。

Answer 1

我已经找到了一种将不同颜色应用于 Extjs 4 DatePicker 的特定单元格的方法，我创建了一个扩展 DatePicker 形式的新组件并添加了单元格着色功能。我将在此处复制代码，因为我不知道如何在此处附加文件：P

Ext.define('Framework.ux.form.EnhancedDatePicker', {

extend: 'Ext.picker.Date',
alias: 'widget.enhanceddatepicker',

yearMonthDictionary: {},
selectedCell: undefined,

fullUpdate: function(argDate){
    this.callParent(arguments);
    this.storeOriginalYearMonthClassNames();
    this.addCurrentYearMonthClasses();
    this.addSelectedCellClass();
},

storeOriginalYearMonthClassNames: function(){
    var tmpCells = this.cells.elements;
    for(var tmpIndex=0; tmpIndex < this.numDays;tmpIndex++) {
        var tmpCell = tmpCells[tmpIndex];
        var tmpCellDate = new Date(tmpCell.title);
        var tmpClassName = tmpCell.className;
        if( this.isCellSelected(tmpCell) ){
            this.selectedCell = tmpCell;
            tmpClassName = tmpCell.className.replace("x-datepicker-selected","");
        }
        this.storeYearMonthClassName(tmpCellDate,'originalClassName',tmpClassName);
    }
},

isCellSelected: function(argCell){
    if( Ext.isEmpty(argCell) ){
        return false;
    }
    if( argCell.className.indexOf('x-datepicker-selected') >= 0 ){
        return true;
    }
    return false;
},

storeYearMonthClassName: function(argDate,argField,argClassName){
    if( Ext.isEmpty(argDate) || Ext.isEmpty(argField) ){
        return;
    }
    var tmpMonthYearKey = argDate.getFullYear() + "-" + argDate.getMonth();
    var tmpYearMonthValues = this.yearMonthDictionary[tmpMonthYearKey];
    if( Ext.isEmpty(tmpYearMonthValues) ){
        tmpYearMonthValues = {};
    }
    var tmpValue = tmpYearMonthValues[argDate.getDate()];
    if( Ext.isEmpty(tmpValue) ){
        tmpValue = {};
    }
    tmpValue[argField] = argClassName;
    tmpYearMonthValues[argDate.getDate()] = tmpValue;
    this.yearMonthDictionary[tmpMonthYearKey] = tmpYearMonthValues;
},

setDateClass: function(argDate,argClass){
    if( Ext.isEmpty(argDate) ){
        return;
    }
    var tmpCurrentDate = this.getValue();
    var tmpCurrentMonthYearKey = tmpCurrentDate.getFullYear() + "-" + tmpCurrentDate.getMonth();
    var tmpYearMonthKey = argDate.getFullYear() + "-" + argDate.getMonth();
    this.addDateAndClassToDictionary(argDate,argClass);
    this.addCurrentYearMonthClasses();
},

addDateAndClassToDictionary: function(argDate,argClass){
    if( Ext.isEmpty(argDate) ){
        return;
    }
    this.storeYearMonthClassName(argDate,'newClassName',argClass);
},

addCurrentYearMonthClasses: function(){
    var tmpCells = this.cells.elements;
    for(var tmpIndex=0; tmpIndex < this.numDays;tmpIndex++) {
        var tmpCell = tmpCells[tmpIndex];
        var tmpCellDate = new Date(tmpCell.title);
        var tmpValue = this.getYearMonthValueByDate(tmpCellDate);
        if( tmpValue.newClassName === null || tmpValue.newClassName === undefined ){
            continue;
        }
        var tmpNewClassName = tmpValue.originalClassName + " " + tmpValue.newClassName;
        if( tmpNewClassName !== tmpCell.className ){
            tmpCell.className = tmpNewClassName;
        }
    }
},

getYearMonthValueByDate: function(argDate){
    if( Ext.isEmpty(argDate) ){
        return;
    }
    var tmpMonthYearKey = argDate.getFullYear() + "-" + argDate.getMonth();
    var tmpYearMonthValues = this.yearMonthDictionary[tmpMonthYearKey];
    if( Ext.isEmpty(tmpYearMonthValues) ){
        return null;
    }
    return tmpYearMonthValues[argDate.getDate()];
},

addSelectedCellClass: function(){
    if( this.selectedCell.className.indexOf('x-datepicker-selected') >= 0 ){
        return;
    }
    this.selectedCell.className = this.selectedCell.className + " x-datepicker-selected";
}

});

这是一个关于如何使用该组件的示例：

var tmpDatePicker = this.down('datepicker[itemId=datePickerTest]');
var tmpDate = new Date(2013,4,2);
tmpDatePicker.setDateClass(tmpDate,"cell-red");

通过这些代码行，我们告诉组件将类“cell-red”应用于与日期“2013-4-2”对应的单元格。

我希望这对试图在 Extjs 4 中实现这一点的人有用。