4

我必须在 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>

这是我的代码，！我看到输出如下：上下文菜单未以正确的格式显示。页面只显示普通链接。怎么了？请帮忙。看这里的屏幕截图

4

4 回答 4

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 的示例。

于 2012-08-27T12:50:49.757 回答
0

我已经尝试了您的示例（尽管删除了对支持 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>

结果：

上下文菜单的结果

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

于 2012-08-30T12:45:15.140 回答
0

Primefaces 3.3 用户指南，第 245 页，说：

使用表单和整页布局时，避免使用包含 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>

一个布局单元必须有它自己的形式，也避免因为同样的原因尝试更新布局单元，而是更新它的内容。

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>

或者如果上述方法不起作用，您可以尝试另一种方法：

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

.ui-layout-west .ui-layout-unit-content {
    overflow:visible;
}
</style>
于 2012-09-05T17:33:38.887 回答
0

您的布局位于单个 h:form 中。您实际上应该在每个布局单元中都有 ah: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>
于 2012-08-30T14:05:34.533 回答