无插件ExtJs4简单甘特图

来源：互联网发布：js input value 编辑：程序博客网时间：2024/04/26 12:06

研究了两天,实现了一个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>

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