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中實現這一目標的人。