ExtJS 4 DatePicker。着色单元格

Question

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

在此先感谢。

Answer 1

我已经发现了一种方法，应用不同色彩到一个ExtJS 4的DatePicker的特定细胞，我创建的延伸形式的DatePicker，并增加了细胞染色的功能的新组件。 我将在这里复制的代码，因为我不konw如何安装此文件：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"); 

有了这些代码行我们告诉组件到类“细胞红色”应用到对应于日期“的单元2013- 4-2' 。

我希望这可以帮助那些试图在Extjs 4中实现这一目标的人。