从Ext JS面板渲染Kendo菜单

Question

我将ExtJS和Kendo UI结合起来 - 我意识到这一点我在这里预订;）

我将一个Kendo菜单渲染到Ext JS（4.2.1）生成的Ext.form.Panel

小提琴：http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/

问题是下拉项目（悬停时）仅在Ext JS Panel的范围内绘制。有没有办法让下拉项目显示在前面＆＃39;一切（我试过改变一些类z-order）？

Answer 1

这不是z-index问题。这是父overflow: hidden问题。如果您使用overflow: hidden CSS属性关联容器，它将始终如此工作。现在，剑道菜单的简单解决方案是将所有菜单相对父项溢出设置为可见：

.x-panel,
.x-panel-body {
    overflow: visible;
}

喜欢这里： http://jsfiddle.net/5e6Lgtaj/2/

但你必须要注意，如果你想将它用作滚动条或实际隐藏溢出，那将是一个问题。

其他选项是将body菜单添加到body元素，但是你将面临更多问题：像松散的样式（​​因为它从具有重要类的初始容器移动），javascript函数使其保持在正确位置并且它将更多问题那么值得。

这是它看起来如何的第一步： http://jsfiddle.net/5e6Lgtaj/3/