Extjs gantt 甘特图 通过grid的简易实现
以下代码在Extjs5.1.4下测试通过,示例图如下：
示例代码如下：（此demo仅供参考，可自行优化及扩展）
<style>
/*甘特图*/
.x-my-col-cell>.x-grid-cell-inner{padding:0;}
.my-gant{height:10px;}
.my-gant-item{display:block;float:left;height:100%;}
.my-gant-item28{width:3.5714%;}
.my-gant-item29{width:3.4482%;}
.my-gant-item30{width:3.3333%;}
.my-gant-item31{width:3.2258%;}
.my-gant-item.selected{font-weight:bold;">red;}
</style>
<script>
Ext.define('MyColumn',{
extend:'Ext.grid.column.Column',
xtype:'mycolumn',
width:40,
cls:'my-column',
defaultRenderer: function(v, cellValues, record, rowIdx, colIdx, store, view) {
var me = this,
prefix = Ext.baseCSSPrefix,
scope = me.origScope || me,
items = me.items,
len = items.length,
i = 0,
item, ret, disabled, tooltip;
ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'my-col-cell';
var spans=[];
var startDate = record.get('startDate');
var endDate = record.get('endDate');
if(!Ext.isEmpty(startDate) && !Ext.isEmpty(endDate)){
for(var j=1;j<=me.daysInMonth;j++){
var cls="my-gant-item";
var cDay=Ext.Date.parse(me.dataIndex+'-'+Ext.String.leftPad(j,2,"0"),'Y-m-d');
if(Ext.Date.between(cDay,startDate,endDate)){
cls="my-gant-item selected";
}
cls+=" my-gant-item"+me.daysInMonth;
spans.push('<span class="'+cls+'"></span>');
}
ret+='<div class="my-gant">'+spans.join("")+'</div>';
}else if(!Ext.isEmpty(startDate||endDate)){
var startOrEndDate = startDate||endDate;
if(Ext.Date.format(startOrEndDate,'Y-m') == me.dataIndex){
spans.push('<span style="font-size:10px;color:red">★</span>');
}
ret+='<div class="my-gant" style="height: 16px;">'+spans.join("")+'</div>';
}else{
ret+='<div class="my-gant">'+spans.join("")+'</div>';
}
return ret;
}
});
Ext.define('GanttDemo', {
extend: 'Ext.grid.Panel',
alias: 'widget.ganttdemo',
years:{},//年份
columnLines:true,
initComponent: function () {
var me = this;
var myColumns=[
{dataIndex: 'itemName',text: '项目名称',align: 'left',style:'text-align:center',width: 160},
{dataIndex: 'impleUnit',text: '项目组织实施单位',style:'text-align:center',align: 'left',width: 260},
{dataIndex: 'startDate',text: '计划开始时间',align: 'left',width: 100,xtype:'datecolumn',format:'Y-m-d'},
{dataIndex: 'endDate',text: '计划完成时间',align: 'left',width: 100,xtype:'datecolumn',format:'Y-m-d'}
];
Ext.apply(me, {
store: {
type: 'store',
autoLoad:true,
fields: [
{name:'startDate',type:'date',dateFormat:'Y-m-d H:i:s'},
{name:'endDate',type:'date',dateFormat:'Y-m-d H:i:s'}
],
proxy:{
url: '../data/gant.json',
type:'ajax',
reader:{
transform:function(data){
if(data && data.success ==true){
//获取年份
Ext.Array.each(data.result,function(d){
if(d.startDate){
me.years[Ext.Date.parse(d.startDate,'Y-m-d H:i:s').getFullYear()]=null;
}
if(d.endDate){
me.years[Ext.Date.parse(d.endDate,'Y-m-d H:i:s').getFullYear()]=null;
}
});
}
return data;
},
rootProperty: 'result'
}
},
listeners:{
load:function(){
for(year in me.years){
if(year){
var monthColumns=[];
for(var i=1;i<=12;i++){
var yearMonth = year+'-'+Ext.String.leftPad(i, 2, '0');
var daysInMonth = Ext.Date.getDaysInMonth(Ext.Date.parse(yearMonth+'-01','Y-m-d'));
monthColumns.push({xtype:'mycolumn',text: i ,dataIndex:yearMonth,align: 'center',daysInMonth:daysInMonth});
}
myColumns.push({text: year,align: 'center',columns:monthColumns});
}
}
me.reconfigure(me.store,myColumns)
}
}
},
columns: []
});
me.callParent(arguments);
}
});
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{xtype:'ganttdemo'}
]
});
});
</script>
示例数据如下：
{
"resultCode" : 0,
"result" : [ {
"id" : "13A9FBC84C",
"createDate" : "2018-05-19 00:00:00",
"createUser" : "陈炳乾",
"endDate" : null,
"itemName" : "11",
"noticeId" : "TLB99728AD",
"orgId" : "TL7AWJFavt",
"impleId" : null,
"impleUnit" : "www",
"progContent" : null,
"remarks" : "备注",
"startDate" : "2017-05-22 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "B942D435EC",
"createDate" : "2017-05-19 00:00:00",
"createUser" : "陈炳乾",
"endDate" : null,
"itemName" : "22",
"noticeId" : "TLB99728AD",
"orgId" : "TL7AWJFavt",
"impleId" : null,
"impleUnit" : "www",
"progContent" : null,
"remarks" : "备注",
"startDate" : null,
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "C23BEA8E16",
"createDate" : "2017-05-22 00:00:00",
"createUser" : "翟丽娜 ",
"endDate" : "2017-05-23 00:00:00",
"itemName" : "dd",
"noticeId" : "TLB99728AD",
"orgId" : "Kfsyb0Node",
"impleId" : null,
"impleUnit" : "dd",
"progContent" : null,
"remarks" : "dddd",
"startDate" : "2017-03-22 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "21FD2D392A",
"createDate" : "2017-05-22 00:00:00",
"createUser" : "李雷",
"endDate" : "2017-08-23 00:00:00",
"itemName" : "dd",
"noticeId" : "TLB99728AD",
"orgId" : "6AjxlyCdhq",
"impleId" : null,
"impleUnit" : "dd",
"progContent" : null,
"remarks" : "备注",
"startDate" : "2017-01-23 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "58EC104749",
"createDate" : "2017-05-22 00:00:00",
"createUser" : "李雷",
"endDate" : "2017-05-25 00:00:00",
"itemName" : "ff",
"noticeId" : "TLB99728AD",
"orgId" : "6AjxlyCdhq",
"impleId" : null,
"impleUnit" : "ff",
"progContent" : null,
"remarks" : "备注",
"startDate" : "2017-02-24 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "FB35ABE2A7",
"createDate" : "2017-05-22 00:00:00",
"createUser" : "朱耀军",
"endDate" : "2017-09-23 00:00:00",
"itemName" : "备注1",
"noticeId" : "TLB99728AD",
"orgId" : "TLyEeT237u",
"impleId" : null,
"impleUnit" : "备注",
"progContent" : null,
"remarks" : "备注备注备注备注",
"startDate" : "2017-03-23 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
}, {
"id" : "AB4659B5E0",
"createDate" : "2017-05-22 00:00:00",
"createUser" : "栗风清",
"endDate" : "2018-07-05 00:00:00",
"itemName" : "方案1",
"noticeId" : "TLB99728AD",
"orgId" : "TrqsybNode",
"impleId" : null,
"impleUnit" : "方案1",
"progContent" : null,
"remarks" : "方案1",
"startDate" : "2017-04-23 00:00:00",
"updateDate" : null,
"updateUser" : null,
"vno" : 1,
"yearDes" : "test"
} ],
"msgId" : "36db528d-1032-4810-a247-5ef6396e5d12",
"success" : true
}
