无插件ExtJs4简单甘特图

最新推荐文章于 2017-05-24 12:02:00 发布

领尚

最新推荐文章于 2017-05-24 12:02:00 发布

阅读量7.8k

点赞数

文章标签： desktop extjs window

本文链接：https://blog.csdn.net/oLinBSoft/article/details/9751515

版权

研究了两天,实现了一个demo,在extjs4,谷歌和火狐,IE9测试通过,ie8下未能显示.

共三个文件复制到 extjs4 demo 的 \extjs-4.1.1\examples\grid\ 目录下即可分别是 linbsoftgtt.htm linbsoftgtt.js linbsoftgtt.png文件:

linbsoftgtt.js

---------------------------------------------------------------------

Ext.require([
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.state.*'
]);




Ext.onReady(function() {
    Ext.QuickTips.init();


function newtaskitem(starttime,endtime) {

 
    var myData = [
     ['r1','2013-09-18','2013-10-15','任务1','green'],
     ['r2','2013-11-19','2013-12-28','任务2','#444444'],
     ['r3','2013-09-19','2013-09-21','任务3','blue'],
     ['r4','2013-09-06','2013-09-9','任务4','#ff00ff'],
     ['r5','2013-10-16','2013-11-17','任务5','#383838'],
     ['r6','2013-08-14','2013-09-25','任务6','#999999']
  ]

    var store = Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'ResourceId'},
           {name: 'StartDate'},
           {name: 'EndDate'},
           {name: 'Name'},
           {name: 'mycolor'},
        ],
        data: myData
    });
    



var cmItems = [];  

//var starttime='2013-09-03';
//var endtime ='2014-2-20';
var vStart = new Date(starttime);	
var vEnd   = new Date(endtime);

cmItems.push({text:'事项',locked:true,width: 150,dataIndex:'Name'}); 

 //  区间天数
 //      var     tmpPer =  Math.ceil((vEnd - vStart) /  (24 * 60 * 60 * 1000) + 1);
var vTmpDate   =  new Date(vStart.getFullYear(),vStart.getMonth(),vStart.getDate());
var dateItems = []; 
var vmonth= vTmpDate.getMonth();
var vTmpMonth;
while(vTmpDate < vEnd) 
  {
 	vTmpMonth = vTmpDate.getMonth();
 	var vzm='';
  	if(vTmpDate.getDay() == 0 || vTmpDate.getDay() == 6){vzm='background:#A6FFA6;';}
 	
 	if(vTmpMonth == vmonth)
 	{
 	  dateItems.push({ text:vTmpDate.getDate().toString(),style:vzm, width:25});	
 	}else{
 	var vyear=vTmpDate.getFullYear();
 	if(vmonth==11){vyear-=1;}
  		cmItems.push({text:vyear.toString() + '年' + (vmonth+1).toString() + '月',columns: dateItems}); 
  		vmonth = vTmpMonth;
 		dateItems = []; 
 		dateItems.push({ text:vTmpDate.getDate().toString(),style:vzm,width:25});
 	}
 vTmpDate = new Date((vTmpDate/1000+86400)*1000);
}
if(vTmpMonth == vmonth){cmItems.push({text: vTmpDate.getFullYear().toString() + '年' + (vmonth+1).toString() + '月',columns: dateItems}); }

cmItems.push({
            text     : '',
 	    width    : 0,dataIndex:'mycolor',
 	    renderer: function(value, metaData, record){ 

 	    	var startd = new Date(record.data['StartDate']);	
		var endd   = new Date(record.data['EndDate']);
		if(startd < vStart){startd = new Date(vStart);}
		if(startd > vEnd){startd = new Date(vEnd);}
		if(endd < vStart){endd = new Date(vStart);}
		if(endd > vEnd){endd = new Date(vEnd);}
	        if(endd < startd ){endd = new Date(startd);}	    	
		var dif = startd.getTime() - vStart.getTime(); 
		var vleft = (dif / (86400 * 1000))*25; 
		dif = endd.getTime() - startd.getTime(); 
		var vwidth = (dif / (86400 * 1000))*25;
 	var gtt =   '<div style="left:' + vleft.toString() + 'px;height:21px;width:' + vwidth.toString() + 'px;background-color:' + record.data['mycolor'] + ';" class="sch-event"><div  class="sch-event-inner">' + record.data['Name'] + '</div></div>';	    	
   	    	          return gtt;  }
        }); 


    var grid = Ext.create('Ext.grid.Panel', {
        store: store,
        columnLines: true,
        columns:cmItems,
        height: 350,
        width: 800,
        tbar:[{text:'换日期区间',
        handler: function () {
	grid.destroy();
	newtaskitem('2013-08-10','2013-12-08');
                    }
        
        }],
        title: '日程计划',
        renderTo: 'grid-linbsoftgtt',
        viewConfig: {
            stripeRows: true
        }
    });
    
   }; 

newtaskitem('2013-09-05','2014-2-8');
     
});

linbsoftgtt.htm

----------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>甘特图</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- page specific -->
<style type="text/css">
.x-grid-row-over .x-grid-cell-inner {
    font-weight: bold;
}
  
.sch-event {
border: 1px solid #aaa;
background: lightblue url(linbsoftgtt.png) repeat-x left top;
position: absolute;
overflow: hidden;
cursor: pointer;
z-index: 1;
-webkit-box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
box-shadow: 1px 1px 1px rgba(150, 150, 150, 0.3);
border-radius: 3px;
margin-top: -3px;
} 
 
 
.sch-event-inner {
overflow: hidden;
white-space: nowrap;
margin-left: 3px;
margin-right: 5px;
margin-top: 2px;
color: #fff !important;
text-shadow: rgba(0,0,0,.2) 0 -1px 0;
text-align: center;
}   
    
.row-colorbox {
height: 12px;
width: 12px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
float: left;
margin-right: 7px;
-moz-box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.4);
-webkit-box-shadow: 1px 1px 2px rgba(100, 100, 100, 0.4);
}   
    

</style>
<script type="text/javascript" src="linbsoftgtt.js"></script>
</head>
<body>
    <div id="grid-linbsoftgtt"></div>
</body>
</html>

用该成果实现的一个应用:

领尚

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
无插件ExtJs4简单甘特图

研究了两天,实现了一个demo,在extjs4,谷歌和火狐,IE9测试通过,ie8下未能显示.共三个文件复制到 extjs4 demo 的 \extjs-4.1.1\examples\grid\ 目录下即可分别是 linbsoftgtt.htm linbsoftgtt.js linbsoftgtt.png文件: linbsoftgtt.js---------
复制链接

扫一扫