Jsf 2 P:contextMenu未在P:layout组件内呈现_Jsf 2_Primefaces_Facelets

Jsf 2 P:contextMenu未在P:layout组件内呈现

jsf-2 primefaces

Jsf 2 P:contextMenu未在P:layout组件内呈现,jsf-2,primefaces,facelets,Jsf 2,Primefaces,Facelets,我必须在p:layout标签中写入p:contextMenu 第一个P:layout中的ContextMenu未呈现。我的网页如下： <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="htt

我必须在p:layout标签中写入p:contextMenu 第一个P:layout中的ContextMenu未呈现。我的网页如下：

  <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
  <h:body>
 <h:form id="statementsOfAccountForm">
        <p:layout id="playout" style="min-width:400px;min-height:200px;">
            <p:layoutUnit position="west" resizable="true" size="100"
                minSize="40" maxSize="200" collapsible="true">
    <h:form id="statementsOfAccountLeftForm">
                <p:contextMenu>
                    <p:menuitem value="Account Summary" 
                         />
                    <p:menuitem value="Mini Statement" 
                         />

                </p:contextMenu>
  </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="center" id="centerPage" collapsible="true">
                 <h:form id="statementsOfAccountCenterForm">
        <div align="center">hi</div>
      </h:form>
        </p:layout>
    </h:form>


你好

这是我的密码，

!我看到如下输出：上下文菜单没有以正确的格式显示。页面仅显示普通链接。怎么了？请帮助。查看屏幕截图，

更新属性可能找不到id为centerPage
的组件，因此无法呈现
暂时从菜单项中删除“更新”属性，然后在客户端源中计算要更新的centerPage
layoutUnit中组件的生成客户端id。然后，您可以通过clientId专门引用这些
然而，一个问题是layoutUnit
组件可能不会生成供您参考的客户端组件，因此您可能必须直接参考此layoutUnit中的组件
...
<p:menuitem value="Account Summary" update=":statementsOfAccountForm:centerPageGroup"
... 


<p:layoutUnit position="center" id="centerPage" collapsible="true">
    <h:panelGroup layout="block" id="centerPageGroup"><ui:include 
        src="#{helloBean.pageName}.xhtml" /></h:panelGroup> 
</p:layoutUnit>

。。。
我已经尝试了您的示例（虽然删除了对支持bean的引用），但它的效果与预期的一样：
<h:form id="statementsOfAccountForm">
    <p:layout id="playout" style="min-width:400px;min-height:200px;">
        <p:layoutUnit position="west" resizable="true" size="100"
            minSize="40" maxSize="200" collapsible="true">
            <p:contextMenu>
                <p:menuitem value="Account Summary" update="centerPage" />
                <p:menuitem value="Mini Statement" update="centerPage" />
            </p:contextMenu>
        </p:layoutUnit>
        <p:layoutUnit position="center" id="centerPage" collapsible="true">
            <div align="center">
            </div>
        </p:layoutUnit>
    </p:layout>
</h:form>



结果:

我建议你和我做的完全一样。验证此功能是否有效后，添加更多代码。
您的布局位于单个h:表单中。实际上，每个布局单元中都应该有一个h:form。因此，请尝试以下方法：
<p:layout id="playout" style="min-width:400px;min-height:200px;">
    <p:layoutUnit position="west" resizable="true" size="100"
        minSize="40" maxSize="200" collapsible="true">
        <h:form id="statementsOfAccountLeftForm">
            <p:contextMenu>
                <p:menuitem value="Account Summary" update="centerPage"
                    actionListener="#{helloBean.changeCenterPage('accountSummary')}" />
                <p:menuitem value="Mini Statement" update="centerPage"
                    actionListener="#{helloBean.changeCenterPage('miniStatement')}" />

            </p:contextMenu>
        </h:form>
    </p:layoutUnit>

    <p:layoutUnit position="center" id="centerPage" collapsible="true">
        <h:form id="statementsOfAccountCenterForm">
            <div align="center"><ui:include
                src="#{helloBean.pageName}.xhtml" /></div>
        </h:form>
    </p:layoutUnit>
</p:layout>
</h:form>


，第245页说：
使用表单和整页布局时，避免使用
包含layoutunits，因为生成的dom可能不同。所以
以下内容无效


一个布局单元必须有自己的形式，同时避免尝试
由于同样的原因更新布局单元，更新其内容
相反
Primefaces菜单在layoutUnits中使用时有一点问题。要克服此问题，您可以使用以下CSS代码段：
<style type="text/css">
.ui-layout-unit-center {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
}

.ui-layout .ui-layout-noscroll div.ui-layout-bd {
    overflow: visible;
}
</style>


.ui布局单元中心{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
z指数：-1；
}
.ui布局.ui布局noscroll div.ui-layout-bd{
溢出：可见；
}

或者，如果上述方法不起作用，您也可以尝试：
<style type="text/css">
.ui-layout-west {
    z-index:20 !important;
    overflow:visible;
}

.ui-layout-west .ui-layout-unit-content {
    overflow:visible;
}
</style>


.ui布局西{
z指数：20！重要；
溢出：可见；
}
.ui布局西部.ui布局单元内容{
溢出：可见；
}
您好，谢谢您的回复，但实际上我的问题是，我根本看不到上下文菜单。我已经更新了问题以增加更清晰的内容。@amruta正如maple_shaft所说，上下文菜单可能没有呈现，暂时删除'update=“centerPage”`并按照maple_shaft的指示操作。您好，是的，我删除了更新属性并部署了，但仍然无法在页面上看到菜单组件。此外，此页面也包含在其他页面中。当我在主页中写入菜单组件时，它会正确显示，但当我在菜单中写入时，它不会呈现。我看不出这与OP的问题有何关系。OP是否使用一个或多个表单并不重要。不过，我同意，最好的做法是在表单中包含的内容周围只包含表单。当我添加包含contextMenu的表单标记时，标记标记会像普通链接一样显示。我修改了问题以显示屏幕截图。请检查澄清，页面呈现时屏幕截图中的链接是否出现，或者右键单击屏幕时上下文菜单是什么样子？
<style type="text/css">
.ui-layout-west {
    z-index:20 !important;
    overflow:visible;
}

.ui-layout-west .ui-layout-unit-content {
    overflow:visible;
}
</style>