从 Ext JS 面板呈现 Kendo 菜单
Rendering a Kendo Menu from an Ext JS Panel
我正在结合 ExtJS 和 Kendo UI - 我知道我已经取消预订了 ;)
我正在将 Kendo 菜单渲染到生成的 Ext JS (4.2.1) Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
问题是下拉项（悬停时）仅在 Ext JS 面板的范围内绘制。有没有办法让下拉项显示所有内容的 'in front'（我尝试更改一些 类 z-order）？
这不是 z-index 问题。这是 parent overflow: hidden 问题。如果你有 overflow: hidden CSS 属性 的相关容器，它将始终像那样工作。 kendo 菜单现在的简单解决方案是将所有菜单相对 parent 溢出设置为可见：
.x-panel,
.x-panel-body {
overflow: visible;
}
喜欢这里：
http://jsfiddle.net/5e6Lgtaj/2/
但你必须注意，如果你想将它用作其中的滚动条或实际上隐藏溢出，那将是一个问题。
其他选项是将菜单附加到 body 元素，但你会面临更多问题：比如松散的样式（因为它是从具有重要 类 的初始容器中移出的），javascript 函数到保持它在正确的位置，它会比它值得的问题更多。
这是第一步的样子：
http://jsfiddle.net/5e6Lgtaj/3/
我正在结合 ExtJS 和 Kendo UI - 我知道我已经取消预订了 ;)
我正在将 Kendo 菜单渲染到生成的 Ext JS (4.2.1) Ext.form.Panel
Fiddle: http://jsfiddle.net/blackfrancis75/5e6Lgtaj/1/
问题是下拉项（悬停时）仅在 Ext JS 面板的范围内绘制。有没有办法让下拉项显示所有内容的 'in front'（我尝试更改一些 类 z-order）？
这不是 z-index 问题。这是 parent overflow: hidden 问题。如果你有 overflow: hidden CSS 属性 的相关容器，它将始终像那样工作。 kendo 菜单现在的简单解决方案是将所有菜单相对 parent 溢出设置为可见：
.x-panel,
.x-panel-body {
overflow: visible;
}
喜欢这里： http://jsfiddle.net/5e6Lgtaj/2/
但你必须注意，如果你想将它用作其中的滚动条或实际上隐藏溢出，那将是一个问题。
其他选项是将菜单附加到 body 元素，但你会面临更多问题：比如松散的样式（因为它是从具有重要 类 的初始容器中移出的），javascript 函数到保持它在正确的位置，它会比它值得的问题更多。
这是第一步的样子： http://jsfiddle.net/5e6Lgtaj/3/