Extjs 甘特图自定义任务树
Extjs 甘特图GanttPanel中默认的设置很难满足客户多变需求,我们就针对一些常用的扩展做一个说明。
一般最常用的需求是,自定义多列,自定义行,自定义单元格等等。下面我们就分别来说明。
Extjs 甘特图自定义列
Extjs 甘特图GanttPanel的列配置对象,描述了表头、单元格、编辑器等重要配置。一般来说, 我们提供一个列配置对象,显示了“序号”、“任务名称”、“开始日期”、“完成日期”、“进度”等比较典型的列。 但是有时我们会显示更多的任务属性,例如,任务的部门,负责人,地点等等。
Extjs 甘特图自定义列非常简单,只要在配置GanttPanel的列配置对象中多添加一个单元既可。见以下Extjs 甘特图例子
1. var g = new Sch.gantt.GanttPanel({
2. // Setup your static columns
3. columns : [
4. {
5. header : 'Tasks',
6. sortable:true,
7. dataIndex : 'Name',
8. locked : true,
9. width:250,
10. editor : new Ext.form.TextField()
11. },{
12. header : '更多列1',
13. sortable:true,
14. width:50,
15. dataIndex : 'Other1',
16. locked : true
17. }
18. ],
19.
20. taskStore : taskStore,
21. dependencyStore : dependencyStore
22. });
Extjs 甘特图运行后的软件截图如下
来源:oschina
链接:https://my.oschina.net/u/242778/blog/41500