javascript - ExtJS 4.2.1 - 向任何弹出菜单添加顶部箭头

Question

我想创建一个具有以下外观的菜单：

我已经设法使用 css 和圆角创建背景颜色。

我现在正在尝试添加顶部箭头。

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

Answer 1

您可以修改renderTpl菜单的 以包括顶部的三角形。我建议创建一个扩展的类Ext.menu.Menu。请参阅此示例。

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;
}