标题栏中的Dashlet编辑按钮无法正确显示

Question

我正在尝试创建一个简单的Alfresco dashlet，并在标题栏上启用了编辑按钮。 不幸的是，我无法弄清楚如何让编辑按钮实际显示在标题栏上。

这是我到目前为止：

dashlet desc文件 （.desc.xml）

<webscript>
   <shortname>Sample</shortname>
   <description>Displays a Sample dashlet</description>
   <family>dashlet</family>
   <url>/mycompany/components/dashlets/sample-dashlet</url>
</webscript>

我的主要freemarker模板文件 （.ftl）

<script type="text/javascript">
    //<![CDATA[
    var sampleDashlet = new MyCompany.dashlet.SampleDashlet("${args.htmlid}").setOptions({
        "componentId": "${instance.object.id}",
        "siteId": "${page.url.templateArgs.site!""}",
        "title": "${msg("header")}"
    }).setMessages(${messages});
    new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");

    var editDashletEvent = new YAHOO.util.CustomEvent("onDashletConfigure");
    editDashletEvent.subscribe(sampleDashlet.onConfigClick, sampleDashlet, true);

    new Alfresco.widget.DashletTitleBarActions("${args.htmlid}").setOptions({
        actions: [{
            cssClass: "edit",
            eventOnClick: editDashletEvent,
            tooltip: "${msg("dashlet.edit.tooltip")?js_string}"
        }]
    });
    //]]>
</script>

<div class="dashlet-1"> 
 <div> Test </div>
</div>

似乎问题必须在我的配置某处，但我找不到它。 有人能指出我正确的方向吗？

Answer 1

如果您想要一个设置为可通过这种方式配置的非常简单的小面板的工作示例，请参阅http://code.google.com/p/alfresco-get-latest-document 。 此博客文章设置了基本功能： http ： //ecmarchitect.com/archives/2012/05/08/1592 。 此博客文章对此进行了扩展，以使初始小面板可配置： http ：//ecmarchitect.com/archives/2012/05/15/1599。

在比较你的FTL和我的FTL时，我想知道你的div类/ id是否需要遵循这种模式：

  <div class="dashlet getlatestdoc">
  <div id="getlatestdoc_title" class="title">
    ${title}
  </div>

否则，编辑按钮将如何知道自己渲染的位置？

Answer 2

正如Jeff建议的那样，您需要在标记中为dashlet的标题栏包含一个<div>元素，并为class属性添加适当的值，如下所示

<div class="dashlet dashlet-1">
    <div class="title">Title</div>
    <div class="body">Body content</div>
</div>

当您的内联JavaScript代码创建的Alfresco.widget.DashletTitleBarActions实例被实例化时，它将查找具有类title的子<div>并将在那里添加操作。

我还在父div中添加了一个dashlet类，这是应用默认dashlet样式所必需的。