Javascript ExtJS 4.2.1-在任何弹出菜单中添加顶部箭头

我希望创建具有以下外观的菜单：

我已经设法用css和圆角创建了背景色

我现在尝试添加顶部箭头

---

如何将元素添加到菜单本身（箭头），并移动其原始打开位置？

您可以修改菜单的

renderTpl

，以包括顶部的三角形。我建议创建一个扩展

Ext.menu.menu

的类。看

---

您可以修改菜单的

renderTpl

，将三角形包含在顶部。我建议创建一个扩展

Ext.menu.menu

的类。看

---

回答得很好。正确的我需要，但我仍然有一个小问题，我使用框架菜单，所以我将有圆角。originalTpl只保存菜单体，但它仍在框架内。。。我能把它从镜框里拿出来吗？这有点棘手。您可能可以在三角形上使用

position:absolute

，然后使用其他样式使其显示在您需要的位置。您还必须确保父级

div

具有

溢出：可见

，这可能会有一些副作用。同样，它工作起来很有魅力，我如何设置默认偏移量，以便在菜单打开时将其位置下移一点？同样，没有简单的方法可以做到这一点。可能有很多函数可以重写以获得所需的外观。我可以通过在设置位置之前覆盖

（参见更新的答案）将其向下移动。哇，非常好的答案，如果可以的话，我会再次投票支持你，谢谢！回答得很好。正确的我需要，但我仍然有一个小问题，我使用框架菜单，所以我将有圆角。originalTpl只保存菜单体，但它仍在框架内。。。我能把它从镜框里拿出来吗？这有点棘手。您可能可以在三角形上使用
position:absolute
，然后使用其他样式使其显示在您需要的位置。您还必须确保父级
div
具有
溢出：可见
，这可能会有一些副作用。同样，它工作起来很有魅力，我如何设置默认偏移量，以便在菜单打开时将其位置下移一点？同样，没有简单的方法可以做到这一点。可能有很多函数可以重写以获得所需的外观。我可以通过在设置位置之前覆盖
（参见更新的答案）将其向下移动。哇，非常好的答案，如果可以的话，我会再次投票支持你，谢谢！
Ext.define('Ext.menu.TriangleMenu', {
    extend: 'Ext.menu.Menu',

    initComponent: function () {
        //get the original template
        var originalTpl = Ext.XTemplate.getTpl(this, 'renderTpl');

        //add the triangle div (or img, span, etc.)
        this.renderTpl = new Ext.XTemplate([
           '<div class="menu-triangle"></div>',
           originalTpl.html,         //the html from the original tpl
           originalTpl.initialConfig //the config options from the original tpl
        ]);

        this.callParent();
    },

    beforeSetPosition: function () {
        //shift the menu down from its original position
        var pos = this.callParent(arguments);

        if (pos) {
            pos.y += 5; //the offset (should be the height of your triangle)
        }

        return pos;
    }
});

.menu-triangle {
    height: 0;
    width: 0;
    border-bottom: 5px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}