Question

我的目标是生成一个Alfresco共享页面，其中包含一个dhtmlxgantt图表，该图表是由Alfresco网站数据列表生成的。

到目前为止我所取得的成就：

我有一个Datalist，其中包含甘特图的所有必要信息。
我创建了一个存储库脚本，用于从datalist中检索必要的值，而.ftl模板显示了需要由dhtmlxgantt解析器解析的值，即：

{数据：[{ID：00008，文本：Titel7'，起始日期：'16 -2-2017' ，持续时间：6，进展：0.65，开：真}]};

我创建了一个Alfresco共享页面，它调用存储库脚本并获得甘特准备json。
我已将dhtmlxgantt插件集成到Alfresco共享页面
被称为Json被甘特解析器解析

问题是，甘特棒等所在的div是如此之小，以至于只显示了时间轴。我不知道如何更改div的大小，因为它是由dhtmlxgantt JavaScript文件本身生成的。

我可以肯定地说甘特条和左侧的描述是正确加载的，因为当我调整它们出现的div容器的CSS属性时。但是当我加载页面时，div被设置为一个大小，就像没有任何甘特棒一样。

这是我加载页面时得到的内容： just loaded page

这就是我在firefox控制台中调整div大小时得到的结果： loaded and adjusted via firefox

还有其他人遇到过这个问题吗？

修改我现在尝试过像@vikash建议的那样。我有以下页面文件（generate-gantt.xml）位于../ alfresco / site-data / pages

<page>
<template-instance>generate-gantt</template-instance>
<authentication>user</authentication>
</page>

和位于../ alfresco / site-data / template-instances

的模板实例文件（generate-gantt.xml）

<template-instance>
   <template-type>org/alfresco/<<temp-type>></template-type>
   <components>

      <component>
         <region-id>gantt</region-id>
         <url>/getDatalistValues</url>
      </component>

   </components>
</template-instance>

“/ getDatalistValues”是我创建并完美运行的存储库webscript。它返回格式正确的“json”（根据定义它无效，但dhtmlxgantt需要它以此格式）

{

    data:[
        {
            id:00021,
            text:'Overflow',
            start_date:'1-3-2017',
            duration:2,
            progress:0.45,
            open:true
        },
        {
            id:00008,
            text:'Titel7',
            start_date:'16-2-2017',
            duration:6,
            progress:0.65,
            open:true
        },
        {
            id:00010,
            text:'Nachträglich2',
            start_date:'22-2-2017',
            duration:0,
            progress:0.39,
            open:true
        },
        {
            id:00006,
            text:'Titel5',
            start_date:'19-2-2017',
            duration:7,
            progress:0,
            open:true
        }
    ]

};

此外，我还有以下组件（page.gantt.content.xml）位于../ alfresco / site-data / components

<?xml version="1.0" encoding="utf-8"?>
    <component>
      <id>page.gantt.content</id>
      <scope>page</scope>
      <region-id>gantt</region-id>
      <source-id>content</source-id>
      <url>/getDatalistValues</url>
    </component>

“getDatalistValues”与我上面提到的相同的存储库webscript。

最后但并非最不重要的是我的模板文件（generate-gantt.ftl）位于../ alfresco / templates

<#include "/org/alfresco/include/alfresco-template.ftl" />
    <@templateHeader></@>
    <@templateBody>
       <@markup id="alf-hd">
       <div id="alf-hd">
          <@region scope="global" id="share-header" chromeless="true"/>
       </div>
       </@>
       <@markup id="bd">
        <div id="bd">
            <@region scope="content" id="gantt"/>
        </div>
       </@>
    </@>
    <@templateFooter>
       <@markup id="alf-ft">
       <div id="alf-ft">
          <@region id="footer" scope="global" />
       </div>
       </@>
    </@>

当我通过https://localhost:8080/share/page/generate-gantt加载页面时。它会生成ALfresco页眉和页脚，但不会显示该组件。当我看一下Firefox中的html代码时，组件所在的div将获得id“unbound-region-gantt”。有谁看到我的错误？而另一个问题是，我在哪里放置处理“/ getDatalistValues”脚本结果的.js文件，并解析它以从结果中生成甘特图？

Answer 1

dhtmlxGantt继承其html容器的大小，除非您另行指定，对于dhtmlxScheduler也是如此。尝试设置一些默认高度，例如

HTML：

void merge(std::list<int>& L, std::vector<int>& V) {
    for (auto& x : L) V.push_back(x);
    std::sort(V.begin(), V.end());
}

CSS：

<div id="gantt_here"></div>

JS：

#gantt_here { 
    height: 600px; 
}

如果您使用相对尺寸（例如身高：100％） - 确保父元素也有一些初始高度，否则您将从0px获得100％

Answer 2

创建冲浪页面请参阅此链接。 http://docs.alfresco.com/5.0/tasks/dev-extensions-share-tutorials-add-page.html

如果您想在此页面中显示您的数据，那么您必须将您的webscript组件绑定到此页面。

ftl文件。

<#include "/org/alfresco/include/alfresco-template.ftl" />
<@templateHeader></@>
<@templateBody>
   <@markup id="alf-hd">
   <div id="alf-hd">
      <@region scope="global" id="share-header" chromeless="true"/>
   </div>
   </@>
   <@markup id="bd">
    <div id="bd">
        <@region scope="template" id="test-id"/>
    </div>
   </@>
</@>
<@templateFooter>
   <@markup id="alf-ft">
   <div id="alf-ft">
      <@region id="footer" scope="global" />
   </div>
   </@>
</@>

模板实例文件

<template-instance>
   <template-type>org/alfresco/<<temp-type>></template-type>
   <components>

      <component>
         <region-id>test-id</region-id>
         <url>/components/test-url</url>
      </component>

   </components>
</template-instance>

此标记的ID必须与您必须在模板实例文件中定义的组件ID相同用于创建组件请参阅此链接

http://docs.alfresco.com/5.2/references/surf-object-xml-reference-component.html http://docs.alfresco.com/5.1/concepts/dev-extensions-share-surf-web-scripts.html

<@region scope="template" id="test-id"/>

请参阅此链接以创建webscript组件

http://docs.alfresco.com/5.1/concepts/dev-extensions-share-surf-web-scripts.html 您的webscript url必须与coponent的url相同

 <url>/components/test-url</url>

来自webscripts js的

您可以使用AJAX调用您的repo wescript，或者您可以使用

进行调用

 var result = connector.get("/repo-webscript-url");
if (result.status.code == status.STATUS_OK) {
    var siteJSON = jsonUtils.toObject(result);
}

用于创建repo webscript，请参阅此http://www.krutikjayswal.com/2016/10/alfresco-webscript-spring-webscript.html

dhtmlxgantt Alfresco Share中的图表

2 个答案: