ExtJS 4 DatePicker。染色细胞 [英] ExtJS 4 DatePicker. Coloring cells
本文介绍了ExtJS 4 DatePicker。染色细胞的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
提前感谢
解决方案
我已经找到了应用不同颜色的方法到Extjs 4 DatePicker的特定单元格，我创建了一个从DatePicker扩展的新组件，并添加了单元格着色功能。
我将在这里复制代码，因为我不知道如何在这里附加文件：P
Ext.define 'Framework.ux.form.EnhancedDatePicker'，{
extends：'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.classNam e.replace（ X-日期选择器选择的， ）;
}
this.storeYearMonthClassName（tmpCellDate，'originalClassName'，tmpClassName）;
}
}，
isCellSelected：function（argCell）{
if（Ext.isEmpty（argCell））{
return false;
}
if（argCell.className.indexOf（'x-datepicker-selected'）> = 0）{
return true;
}
返回false;
}，
storeYearMonthClassName：function（argDate，argField，argClassName）{
if（Ext.isEmpty（argDate））|| Ext.isEmpty（argField））{
返回
}
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）{
返回;
}
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中试图完成这一点的人来说可以是有用的。
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.
解决方案
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.
这篇关于ExtJS 4 DatePicker。染色细胞的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
