p:blockUI / pe:blockUI：为什么我的简单示例不起作用？

Question

我想在执行按钮触发操作时隐藏元素：

<h:form id="sendtxform">
        <p:panelGrid columns="1" styleClass="ui-noborder">      
            <pe:blockUI block="input" widgetVar="blockUIWidget">
            LOADING<br />
                <p:graphicImage name="images/ajax-loader.gif" />
            </pe:blockUI>

            <p:commandButton id="command" value="ISSUE APP"
                actionListener="#{transactionXmlController.getTxDataPredefined}"
                ajax="true" update="growl,input"
                onstart="PF('blockUIWidget').block();"
                oncomplete="PF('blockUIWidget').unblock();">
            </p:commandButton>

            <p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
                value="#{transactionXmlEditableModel.xml}" />
        </p:panelGrid>
    </h:form>

我尝试使用 p:blockUI / pe:blockUI 和 with/without onstart 和 oncomplete 属性。

我做错了什么？我在其他地方使用 blockUI，它工作正常：唯一的区别是 table 是它自己的触发器。

我遵循了 this 教程。

Answer 1

屏蔽输入好像不行，可以用面板把输入包起来屏蔽。

PrimeFaces 扩展：

<h:form id="sendtxform">
    <p:panelGrid columns="1" styleClass="ui-noborder">
        <pe:blockUI target="panel" widgetVar="blockUIWidget">
        LOADING<br />
            <p:graphicImage name="images/ajax-loader.gif" />
        </pe:blockUI>

        <p:commandButton id="command" value="ISSUE APP"
            actionListener="#{transactionXmlController.getTxDataPredefined}"
            ajax="true" update="input"
            onstart="PF('blockUIWidget').block();"
            oncomplete="PF('blockUIWidget').unblock();">
        </p:commandButton>

        <p:panel id="panel">
            <p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
            value="#{transactionXmlEditableModel.xml}" />
        </p:panel>
    </p:panelGrid>
</h:form>

PrimeFaces：

<h:form id="sendtxform">
    <p:panelGrid columns="1" styleClass="ui-noborder">
        <p:blockUI block="panel" trigger="command">
        LOADING<br />
            <p:graphicImage name="images/ajax-loader.gif" />
        </p:blockUI>

        <p:commandButton id="command" value="ISSUE APP"
            actionListener="#{transactionXmlController.getTxDataPredefined}"
            ajax="true" update="input">
        </p:commandButton>

        <p:panel id="panel">
            <p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
            value="#{transactionXmlEditableModel.xml}" />
        </p:panel>
    </p:panelGrid>
</h:form>

p:blockUI / pe:blockUI：为什么我的简单示例不起作用？

p:blockUI / pe:blockUI: Why doesn't it work in my simple example?

primefaces

jsf-2.2