Question

我必须在P：layout标签内写P：contextMenu 第一个P：布局中的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>

这是我的代码，！我看到输出如下：上下文菜单没有以正确的格式显示。页面仅显示纯链接。有什么问题？请帮忙。看一下屏幕截图here

Answer 1

update属性可能无法找到ID为centerPage的组件，因此无法呈现。

暂时从menuItem中删除update属性，然后评估客户端源，以获取您要更新的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>

这是一个如何使用update属性专门引用id的示例。

Answer 2

我已经尝试了你的例子（虽然删除了对支持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>

结果：

Result of context menu

我建议你尝试和我一样的事情。验证这是否有效后，添加更多代码。

Answer 3

您的布局位于单个h：表单中。你应该在每个布局单元中实际拥有一个h：表单。请尝试以下方法：

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

Answer 4

第245页的

Primefaces 3.3 User's Guide说：

使用表单和整页布局时，请避免使用表单包含layoutunits，因为生成的dom可能不一样。所以以下是无效的。

<p:layout fullPage="true">
    <h:form>
        <p:layoutUnit position="west" size="100">
            <h:outputText value="Left Pane" />
        </p:layoutUnit> 
        <p:layoutUnit position="center">
            <h:outputText value="Right Pane" />
        </p:layoutUnit>
    </h:form>
</p:layout>

布局单位必须拥有自己的形式，也避免尝试由于同样的原因更新布局单元，更新它的内容代替。

在layoutUnits中使用时，Primefaces菜单有一点问题。要克服this issue，您可以使用此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>

如果以上操作不起作用，您可以尝试another approach：

<style type="text/css">
.ui-layout-west {
    z-index:20 !important;
    overflow:visible;
}

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

P：contextMenu不在P：layout组件内渲染

4 个答案: