Primefaces 有条件地扩展 LayoutUnit答案

【问题标题】：Primefaces Conditionally Expand LayoutUnitPrimefaces 有条件地扩展 LayoutUnit
【发布时间】：2011-06-18 21:27:20
【问题描述】：

我正在使用 primefaces 布局组件，并且有一个中心和一个右布局单元。我想在中心布局中有一个链接/按钮，它可以扩展正确的 layoutUnit，因为我在第一次加载页面时默认正确的布局为折叠状态。我在正确的 layoutUnit 上使用布尔表达式，并从我的链接更新它。一切正常，除了正确的 layoutUnit 没有从我的链接中得到 ajaxed 更新。如果我刷新页面，则展开正确的 layoutUnit。

页面：

    <h:form prependId="false"> 
        <p:layout fullPage="true">  
            <p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">  
                <h:outputText value="#{mapBean.text}" />  
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <p:commandLink actionListener="#{mapBean.showDetail}" update="right" value="Expand Right Layout"/>
            </p:layoutUnit>
        </p:layout>
    </h:form>

豆子：

public class MapBean implements Serializable {
     private boolean rightCollapsed=true;
     public void showDetail(ActionEvent e){
        rightCollapsed=false;
     }
    //getter/setter for rightCollapsed

【问题讨论】：

标签： primefaces

【解决方案1】：

请参阅以下论坛帖子，了解如何使用带有fullPage=true 属性的<p:layout> 组件。

http://primefaces.prime.com.tr/forum/viewtopic.php?f=3&t=4766

您不能将布局组件包装在这样的表单中，每个<p:layoutUnit> 都需要自己的嵌套表单。您仍然可以 update 其他表单的组件，方法是设置表单 ID 并按照另一个答案的建议正确引用组件 ID。试试这样的：

<p:layout fullPage="true">  
  <p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}"> 
    <h:form id="rightForm" prependId="false">
      <h:outputText id="mapBeanTextOutputText" value="#{mapBean.text}" />
    </h:form>
  </p:layoutUnit>
  <p:layoutUnit position="center">
    <h:form id="centerForm" prependId="false">
      <p:commandLink actionListener="#{mapBean.showDetail}" update="mapBeanTextOutputText" value="Expand Right Layout"/>
    </h:form>
  </p:layoutUnit>
</p:layout>

【讨论】：

【解决方案2】：

问题可能是您没有更新布局。您可以给 h:form 一个 id ，并使用此 id 替换命令按钮的 update id 名称，如下所示：

<h:form id="layoutForm" prependId="false">
<p:layout fullPage="true">  
            <p:layoutUnit id="right" position="right" width="350" header="Marker Details" resizable="true" closable="true" collapsible="true" collapsed="#{mapBean.rightCollapsed}">  
                <h:outputText value="#{mapBean.text}" />  
            </p:layoutUnit>
            <p:layoutUnit position="center">
                <p:commandLink actionListener="#{mapBean.showDetail}" update="layoutForm" value="Expand Right Layout"/>
            </p:layoutUnit>
        </p:layout> 
</form>

【讨论】：