ExtJS 4 DatePicker. Coloring cells

问题

I need help, I am trying to be able to apply different colors to the cells of an Extjs4 DatePicker component, I would like to say for example, if a specific day has uncomplete tasks mark that day as red.

Thanks in advance.

回答1:

I already found a way to apply different colors to specific cells of an Extjs 4 DatePicker, I created a new component that extends form DatePicker and adds the cell coloring functionality. I will copy the code here as I dont konw how to attach a file here :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";
}

});

This is an example on how to use the component:

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

With those code lines we are telling the component to apply the class 'cell-red' to the cell corresponding to the date '2013-4-2'.

I hope this can be useful for people that was trying to accomplish this in Extjs 4.

来源：https://stackoverflow.com/questions/16659702/extjs-4-datepicker-coloring-cells