开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

extjs的甘特图控件

ExtJS是一个用于构建前端用户界面的JavaScript框架，它提供了丰富的组件来帮助开发者创建复杂的Web应用程序。然而，关于ExtJS的甘特图控件，目前没有直接的信息表明ExtJS官方提供了甘特图控件。不过，开发者可以使用第三方库来实现甘特图功能。

优势

灵活性：允许开发者自定义甘特图的显示方式和交互逻辑。
可扩展性：可以与其他ExtJS组件无缝集成，适合构建大型应用程序。
丰富的功能：支持任务分组、依赖关系设置、里程碑标记等。

类型

基于XML/JSON的数据模型：支持从外部数据源加载任务信息。
可视化编辑：提供拖拽调整条形图位置的功能，方便用户交互。

应用场景

项目管理：展示项目进度和任务安排。
生产调度：优化生产流程和资源分配。
资源规划：帮助管理者可视化资源分配情况。

示例代码

虽然ExtJS没有官方的甘特图控件，但可以通过引入第三方库如dhtmlxGantt来实现甘特图功能。以下是一个简单的示例代码，展示如何在Vue项目中使用dhtmlxGantt：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue3 dhtmlxGantt Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dhtmlxgantt@1.8.10/dist/dhtmlxgantt.css">
    <script src="https://cdn.jsdelivr.net/npm/dhtmlxgantt@1.8.10/dist/dhtmlxgantt.js"></script>
</head>
<body>
    <div id="gantt_here" style="width: 100%; height: 100%;"></div>
    <script>
        var gantt_here = new dhtmlxGantt('gantt_here');
        gantt_here.init("https://docs.dhtmlx.com/gantt/data/data.json");
    </script>
</body>
</html>

请注意，上述代码仅为示例，实际使用时需要根据具体需求调整代码。

由于ExtJS本身并未提供甘特图控件，如果需要使用甘特图功能，建议查找专门提供此类功能的第三方库，并根据项目需求进行集成和定制。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

ExtJs学习笔记(4)_EditorGridPanel(可编辑的网格控件)

这一节，我们将看到ExtJs功能强大的可编辑网格控件，几乎与VS.Net的GridView功能一样了，但是ExtJs的可是纯JS的UI 一.静态示例(改自ExtJs的官方示例) a.因为我们是采用xml...做为数据源的，这里贴出xml的内容 Code 02/01/2006 1 b.ExtJs...2007-03-07T15:48:04，ExtJs不能正确识别这种格式，无奈之下，只好手动修改*.designer.cs文件中自动生成的T_Class类，把...FormatDateString方法，当然大家也可以自己定义返回的格式，只要ExtJs能识别就可以了 2.前端页面，跟静态示例几乎一样，贴一下代码: <%@ Page Language="C#" AutoEventWireup

3.5K5 0

ExtJs四(ExtJs MVC登录窗口的调试)

onReady函数前面加入以下代码： Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs.../ux' } }); 代码中，enabled为true，表示开启动态加载，paths对象里面定义的就是加载路径，在这里定义了Ext扩展的加载路径为“scripts/extjs/ux”。...但问题是没鼠标指针不是手型的，这得改一下，要改不难，在创建Img对象的时候，加入style配置项就可以了，它会将该配置的值作为图片的样式，修改后的代码如下： me.image = Ext.create(...然后添加一个WriteJobjectResult的静态方法，方法的返回值为JObject。方法的参数暂时只有一个，布尔值的success。...现在切换回AccountController控制器，引用Helper命名控件，并定义一个布尔类型的变量success，并通过刚才定义的WriteJobjectResult方法返回结果（要），代码如下：

4.4K2 0

ExtJs四(ExtJs MVC登录窗口的调试)

onReady函数前面加入以下代码： Ext.Loader.setConfig({ enabled: true, paths: { 'Ext.ux': 'scripts/extjs.../ux' } }); 代码中，enabled为true，表示开启动态加载，paths对象里面定义的就是加载路径，在这里定义了Ext扩展的加载路径为“scripts/extjs/ux”。...但问题是没鼠标指针不是手型的，这得改一下，要改不难，在创建Img对象的时候，加入style配置项就可以了，它会将该配置的值作为图片的样式，修改后的代码如下： me.image = Ext.create(...然后添加一个WriteJobjectResult的静态方法，方法的返回值为JObject。方法的参数暂时只有一个，布尔值的success。...现在切换回AccountController控制器，引用Helper命名控件，并定义一个布尔类型的变量success，并通过刚才定义的WriteJobjectResult方法返回结果（要），代码如下：

2.6K4 0

甘特图是什么？甘特图是用来干什么的？

甘特图（Gantt chart）也称为横道图，条状图（Bar chart）。以作者亨利·甘特先生的名字命名。...基本上它是一个折线图，水平轴表示时间，垂直轴表示活动（项目），折线表示整个期间的计划和实际完成活动的情况。甘特图的含义有哪些？...2.其他领域今天，甘特图不仅适用于生产管理领域。随着生产管理的发展和项目管理的扩展，它已应用于各个领域，例如：建筑，IT软件，汽车等。甘特图可以用什么软件做？...许多小白项目管理人员都不知道如何使用专业软件绘制甘特图，因此他们使用传统的Excel工具进行绘制。尽管Internet上有许多关于“如何使用Excel绘制甘特图”的教程，但我个人非常反对这些内容。...Excel的主要功能用作电子表格，而非绘制甘特图。一方面，Excel自身的绘图功能不强大，另一方面，该软件严重缺少项目管理所需的报告。

3.2K1 0

Excel: 甘特图的简单绘制

文章背景：在项目管理中，通常需要绘制甘特图，进行各个项目的时间管理，从而确保项目质量并按时完成。本文基于一个房地产项目，采用excel进行甘特图的简单绘制。图表类型：堆积条形图。

8011 0

Extjs中ComboBoxTree的实现

最近涉及到的一个项目中，需要实现ComboBoxTree的效果，首先，看看效果吧…… ?...在Extjs中是没有这种效果的，所以得自己写，在网络上看了看别人的资料，自己再总结了一下，修改了一下，代码如下： Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox...Ext.ux.TreeCombo.superclass.initComponent.call(this); } }) Ext.reg("treecombo", Ext.ux.TreeCombo); 之后呢，在主页中添加Extjs...type="text/javascript"> 其中，login.js的代码如下...: "取消", handler: function () { _window.hide(); } }] }) _window.show(); }) treedata.ashxd的内容为

1.3K2 0

有哪些好用的甘特图插件?

甘特图对于业务场景中的工程项目管理、预算执行、生产计划等都能将原有的表格数据，转变为直观的甘特图模式。...作为纯前端表格控件SpreadJS 的插件，甘特图可以作为一个特殊的“Sheet”融入已有的表格中，方便进行数据的可视化展示，也能更直观的查看计划执行情况，如下图所示： SpreadJS甘特图插件具备以下的功能...基于 SpreadJS 的底层数据模型，能够将树形数据展示为甘特图表格和图表，支持 ID、Level、Children类型数据结构 // the id-parentId structure schema...支持保存为 SSJSON / SJS / Excel / PDF，并支持打印功能如果想参与甘特图的预览版试用，可访问以下地址进行获取：https://gcdn.grapecity.com.cn/...showtopic-180313-1-1.html 预览版产品包有以下的内容：甘特图功能说明文档 7个插件示例：初始化甘特图、缩放及滚动、定制样式、布局设置、任务设置、日历设置、导入导出

5263 0

ExtJS学习———–Ext.Array，ExtJS对javascript中的Array的扩展

关于ExtJS对javascript中的Array的扩展。...Parameters item : Object 数组当前的索引中的元素 index : Number 数组当前的索引 allItems : Array 作为方法第一个參数的数组本身...这个功能相当于Array的splice方法。可是避免了IE8的splice函数bug。不会复制移除的元素并按次序返回它们。...这样的情形下，各数组的全部元素也将被加入到目标数组的末尾。...表示要转换的起始位置. 默觉得 0 end : Number (optional) 从1開始的索引，表示要转换的结束位置. 默觉得要迭代元素的末尾位置。

1.2K1 0

ExtJS学习———–Ext.String，ExtJS对javascript中的String的扩展

关于ExtJS对javascript中的String的扩展，能够參考其帮助文档，文档下载地址：http://download.csdn.net/detail/z1137730824/7748893 以下对当中的部分方法进行介绍...该字符串中第一个字母为大写字母 Parameters string : String 要转换的字符串 Returns String 转换后的字符串（2）ellipsis...添加省略号(‘…’)的显示 Parameters value : String 要裁剪的字符串 length : Number 要裁剪同意的最大长度 word : Boolean...的查询字符串, 依据处理逻辑来推断放置一个’?’...string : String 要加到URL的内容。 Returns String 所生成的URL。

6941 0

带实际执行进度的甘特图

今天要跟大家分享的图标是带实际执行进度的甘特图！ ▽▼▽ 由于本图所用到的技巧和思路特别复杂，过程相对繁琐，所以本案例的介绍会省略掉很多细节性的步骤，否则图文会很冗长，如果感兴趣，可以后台留言交流。...●●●●● 首先还是观察一下本案例的数据结构： ?...首先插入一个带直线点的散点图（不用选区任何数据）。 ?...然后反转垂直轴的数据序列，并将两个数据序列的直线填充无色隐藏。 ? 修改水平坐标轴的取值范围。 ? ?...是不是要比昨天分享的那个图高大上多了，不过过程也是相当繁琐，其实都是之前讲过的小技巧的组合，反复练习就看明白其中包含的思路了！本文参考《Excel图表拒绝平庸》作者：陈荣兴

2.1K5 0

【干货】绘制甘特图的7个步骤

绘制甘特图大致上需要以下几个步骤，本文总结如下：图片1）列举任务集合，任务集合由工作分解得到，一般情况下，将任务按计划启动时间排序并标好序号，列于图表的左侧纵轴。...3）描述依赖关系，留置依赖关系栏目，逐个将与当前任务将存在依赖关系的前要任务的序号填入，该依赖关系可能没有，只有一个或有多个。...4）设置时间窗格，一般情况下，以一个工作日为一个时间窗格，在横轴上将时间窗格的日期标记出来，非工作日一般无需标记。...5）描记计划窗口，按计划开始时间和结束时间用绿色填充任务时间窗格，将每个任务的计划窗口描记出来。...6）描记实际进度，对已经启动的任务，按实际开始时间用红色填充任务时间窗格，直至实际结束时间或截止工作日，对未开始的任务，用黄色填充依据时间依赖关系推导出来的预计实际时间窗口，重复这一过程直至所有任务的实际或预计进度都已被描记

1.1K4 0

EXT.NET高效开发（一）——概述

相比Extjs，Ext.NET毋庸置疑的可以大大提高生产力（这里我只说EXT.NET的优势）： 1）带智能提示的配置。 ...在VS设计界面，可以直接拖出EXT.NET控件，然后可以像编辑传统的ASP.NET控件一样来编写配置。Ctrl+J——J的爽吧。 2）编写速度加快。...从VS设计源码界面，即使布局很复杂，代码很多，你也可以很清楚的看清楚各个控件的父子关系，可以很方便的找到哪个控件，也可以很方便的折叠哪些部分。 6）可以在服务器事件中操作。...（生产力++）虽然WebForm可以使用微软的Ajax以及Ajax控件进行开发，但是用户体验还是远远不及extjs。而且你可以跟客户忽悠，这个功能多么滴难做，多么好，但是我们做出来了。...5）要求更高的解决问题的能力。（生产力--）由于对EXT.NET的不理解、不熟悉，或者对extjs的不了解（前面说过，使用EXT.NET也需要了解Extjs。毕竟Extjs是他爸啊。）

1.1K3 0

ExtJs学习笔记(20)-利用ExtJs的Ajax与服务端WCF交互

ExtJs是一套非常不错的javascript UI库(第一次接触ExtJs的，可到官方网站http://www.extjs.com/deploy/dev/examples/samples.html看下示例...相信不少人会心动的)，不仅组件丰富，效果漂亮，而且ExtJs集成的Ajax功能可以方便的与.Net的WCF进行交互....这里我们将演示ExtJs的FormPanel从WCF加载数据，以及如何提交数据到WCF服务端 1.首先来定义一个用于传输信息的Class（实际开发中，可以是Linq to Sql的Class或任何可序列化的实体类...获取WCF端的数据，SaveMyData,SaveMyData2用来保存ExtJs提交过来的数据，区别是SaveMyData用于Get方法,SaveMyData2用于Post方法需要说明的是[WebInvoke...的Ajax对象完成与WCF的交互(初次接触ExtJs Ajax的，可参见ExtJs学习笔记(5)_Ajax示例https://cloud.tencent.com/developer/article/1026518

9867 0

自己动手写UI库——引入ExtJs（布局）

里的一个基类，Ext里所有的界面元素都继承自这个基类第二： Id，Width，Region，Height都是这个基类的属性，在ExtJs中Component类也包含这些属性，当然还有很多其他的属性，这里我们就没有一一例举了...第三：设置Width，Region，Height这三个属性的时候我们都让浏览器执行了一段脚本，这段脚本让ExtJs设置控件的相应属性 Panel类的代码第一：我们再这个控件类的构造函数里执行了...JS代码，并通过JS代码创建了这个控件第二：创建完控件之后，就马上获取了这个控件的ID，这个ID是EXTJS自动生成的ID，与页面上的其他控件是不会重复的第三：控件在界面上的ID获取到之后，我们就赋给这个控件的基类的属性...第五： Viewport类的代码第一：这个类的代码的执行逻辑和panel代码类的逻辑相似第二：这个类和Panel类都继承自Container类 Container类的代码第一：与Extjs...相同Container类继承自Compent类，也就是我们前面提到的控件的基类第二：我们再这个类中添加了Add方法，在这个方法里也是执行了一段JS函数，把一个控件添加到另一个控件中第七：工程的目录结构

1K5 0

如何利用甘特图来提高资源的是使用效率？

通过合理利用甘特图，可以显著提高资源的使用效率，确保项目按计划顺利进行。以下是一些具体的策略：1. 明确任务和时间线甘特图最基本的功能是展示每个任务的开始和结束时间。...促进团队协作甘特图可以作为团队成员之间沟通和协作的平台。团队成员可以共享甘特图，实时查看彼此的任务进度和资源分配，从而更好地协调工作，避免重复劳动或资源冲突。6....支持决策制定甘特图提供了项目的整体视图，帮助项目经理做出更明智的决策。例如，通过分析甘特图，项目经理可以决定是否需要增加资源以满足关键任务的需求，或者是否可以通过调整任务优先级来优化资源分配。7....批量操作：允许快速修改多个任务的资源分配，提高效率。结语通过上述策略，甘特图成为了提高资源使用效率的强大工具。...通过合理利用甘特图，特别是结合像zz-plan这样的高级工具，可以确保资源得到最有效的利用，从而提高项目成功率。

1571 0

ExtJs的api文档该怎么看

写在前面之前有在ExtJS初体验中说了ExtJs给我们项目开发带来了很多便利，有童鞋在下面留言问extjs的API该怎么看？很多刚入门的童鞋被ExtJs里各种庞大的控件弄晕了，不知道怎么看api。...那么这篇我就简单地说下extjs的api该怎么看。 ExtJs的api文档该怎么看如果想在本地查看extjs的api，大家自行下载解压查看即可，查看方法网上很多，不再赘述。...hideable : false, flex : 1 }] }); Ext.create方法中传入了两个参数，第一个是控件的类名或别名...，第二个参数就是该控件的配置项了。...的api文档，只要有点英文基础，掌握基本的用法，平时多加应用，Extjs终会成为你的一本快速开发的武林秘籍。

2K2 0

初识Ext.NET

这个据老外说，貌似是ExtJS的Bug，因为Ext.NET会根据你的设置生成标准的ExtJS配置。不过，人总不能在一棵树上吊死吧。...所以我就在这个样式的基础上给它添加上我自己的样式。不过这个函数要放到Ext.onReady里面执行。 2）FieldSet等容器控件不触发验证（除了FormPanel）。...这个老外说了是低版本的ExtJS的问题，于是下载了Ext.NET的整个源码，查看js，发现其目前打包的资源是3.3.0版本。也许就是后面少了个1吧。...不过值得注意的是，在给ExtJS表单控件赋值时，不要使用属性（text、value）赋值，这样只会将值写入到html控件里面，而ExtJS提交数据时不会提交，而应该采用其setValue方法。...这招固然能解决问题，但是我心里总是觉得有原因的，可是没时间耗着。好在随着测试，终于找出了问题所在。即FormPanel控件不推荐使用Content元素布局，如果使用Items布局就不存在该问题了。

1.6K6 0

时间管理的工具——甘特图（Gantt chart）

今天跟大家分享一种用作时间管理的工具——甘特图（Gantt Chart）。...▽▼▽ 这种图表的制作理念非常简单，就是通过设定项目开始时间和持续时间，利用堆积条形图，然后隐藏部分数据条就可以达到甘特图效果。 ●●●●● 首先我们需要准备原数据，并对原数据进行一定的加工整理。...我们看到的上图中有两个数据区域，其实数值是一样的，只是右侧图形中START数据把日期格式更改为了数值格式（excel中的所有日期时间数据都是用数值构造的，起点为1900年）。...最后再更改横轴数据显示方式为日期，最大值最小值更改为原数据区域的最大值最小值范围内（可以适当的超过最小值最大值一点儿范围）。 ? 更改网格线的密度、字体、颜色等。 ?

4.8K7 0

类似这样的甘特图是怎么做的？

1.为什么要用甘特图？复杂问题需要很多道工序，涉及到与多个人进行沟通，人的注意力没法持续关注，导致很容易忘掉很多重要步骤。...最重要的是，Excel简单容易上手，不需要你花太多时间就可以掌握。这时候我们就可以使用Excel来做项目管理里常用的甘特图。 2.什么是甘特图呢？甘特图是以提出者甘特先生的名字命名的。...2）甘特图通过甘特图可以清晰的看到各个任务的完成进度。 3）项目分析项目图表分析部分是根据项目计划数据自动生成的，并不需要人为额外更新，最大程度上减少了人员工作量。...辅助列里的数据会根据你其他列的值动态变化，不需要再手动去填写。 2）甘特图如何制作？...设置好后我们就看到了下图的效果。 image.png 我们将绿色条形的地方选中，选择无填充，让它隐去，就得到了甘特图。然后再做一些图表的细节优化处理，就可以让甘特图更好看了。

1.8K26 25

EXT基础

下载EXT2.0 官方下载地址： http://extjs.com/deploy/ext-2.0.2.zip 开发人员必备的中文手册 http://extjs.org.cn/node/125 EXT学习以及资源不错的网站...•build ：压缩后的ext全部源码(里面分类存放)。 •docs ： API帮助文档。 •exmaples：提供使用ExtJs技术做出的小实例。...注意：在进行下一步之前，我们应该为Ext提供它所需要的——空白图片。Ext需要一个1×1像素的透明gif图片，采用不同的方式来拉伸从而填补控件的宽度。...这是Ext提供浏览器兼容性的一种主要方式。如果没有这个，会默认从远程extjs.com下载。 ?...绑定 renderto是用来指明控件要渲染的节点的。每一个控件都要指明该控件需要渲染到哪一个DOM节点。

4.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭