我想创建一个具有以下外观的菜单:
我已经成功地使用 css 和圆 Angular 创建了背景颜色。
我现在正尝试添加顶部箭头。
如何将元素添加到菜单本身(箭头),并移动其原始打开位置?
最佳答案
您可以修改菜单的 renderTpl
以在顶部包含三 Angular 形。我建议创建一个扩展 Ext.menu.Menu
的类。参见 this example .
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;
}
});
如何渲染三 Angular 形完全取决于您。通过使用这个简洁的小边框技巧,您无需使用图像即可做到这一点。
.menu-triangle {
height: 0;
width: 0;
border-bottom: 5px solid black;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
关于javascript - ExtJS 4.2.1 - 向任何弹出菜单添加顶部箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19089841/