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");

これらのコード行で、日付「2013-4-2」に対応するセルにクラス「cell-red」を適用するようにコンポーネントに指示しています。

Extjs 4 でこれを達成しようとしていた人々にとって、これが役立つことを願っています。