取消最大化的 Primefaces 对话框事件?
Primefaces dialog event for unmaximize?
我的基本问题是 "Is there an event for unmaximize of dialog",我知道我可以为 'maximize' 事件注册 ajax 但是从全屏模式恢复到正常大小后发生的事件呢?
我现在面临的问题描述:
"When dialog comes back from full-screen to normal mode, the scrolls disappear."
文件内容:
<p:dialog ... width="600" height="400" maximize="true">
<p:panel style="overflow:auto;">
<p:dataTable style="min-width:800px !important;">
....cols/data ~height~600px;
</p:dataTable>
</p:panel>
</p:dialog>
在 .show() 动作上一切看起来都正常,在调整大小动作上同样以正确的方式呈现滚动。 UNmaximize 操作后一切都崩溃了(回到正常大小模式)。
我试过并重现问题的 Primefaces 都是我的项目版本 3.5.RC1 和最新的 5.2。
假设在最新版本中问题仍然存在,我需要实施一些解决方法,但无法:(
对话框的 PrimeFaces 文档指出,有一个 minimize、maximize 和 move 事件.
尝试使用
<p:ajax event="minimize" listener="#{bean.listener}" update="controls" />
在你的 p:dialog.
里面
它是如何修复的:
Primefaces 版本 3.5.23 和 4.0.7 以及 5.0.0 已经实施了解决方法,不解决取消最大化事件,因为不可能只在取消最大化时调用该事件。
解决方法涉及手动更改文件 primefaces.js 中对话框 javascript 的 saveState 和 restoreState。方法是保存和恢复对话框内容的宽度和高度。
最好的方法是将解决方案从更高版本的 primefaces 或 elite 版本移植到 3.5。
我不知道也没有检查 primefaces < 6 但从那以后就不需要解决方法了。您可以像下面这样使用 ajax 事件:
<p:dialog widgetVar="myDialog"
header="Dialog"
onShow="updateClientSide()"
modal="true" blockScroll="true" responsive="true"
closable="true" closeOnEscape="true" maximizable="true"
height="80vh" width="80vw" minHeight="300" minWidth="330">
<p:ajax event="maximize" update="{id's to update}" onstart="updateClientSide()" process="@none"/>
<p:ajax event="restoreMaximize" update="id's to update" onstart="updateClientSide()" process="@none"/>
<div>
content
</div>
</p:dialog>
...
<script type="text/javascript">
function updateClientSide() {
your client side stuff
};
</script>
请注意,给定的示例仅适用于客户端回调,如果您想在服务器端处理事情,您需要向 p:ajax 标记添加一个侦听器并更新部分的进程值请求您的需求。
问候
编辑:请提及 Kukeltje 在 primefaces 扩展框架的帮助下执行纯客户端回调的评论。通过使用 pe:javascript libtag,仍然可以使用给定的 primefaces 组件提供的事件,但完全跳过了服务器端的循环。
我的基本问题是 "Is there an event for unmaximize of dialog",我知道我可以为 'maximize' 事件注册 ajax 但是从全屏模式恢复到正常大小后发生的事件呢?
我现在面临的问题描述: "When dialog comes back from full-screen to normal mode, the scrolls disappear."
文件内容:
<p:dialog ... width="600" height="400" maximize="true">
<p:panel style="overflow:auto;">
<p:dataTable style="min-width:800px !important;">
....cols/data ~height~600px;
</p:dataTable>
</p:panel>
</p:dialog>
在 .show() 动作上一切看起来都正常,在调整大小动作上同样以正确的方式呈现滚动。 UNmaximize 操作后一切都崩溃了(回到正常大小模式)。
我试过并重现问题的 Primefaces 都是我的项目版本 3.5.RC1 和最新的 5.2。
假设在最新版本中问题仍然存在,我需要实施一些解决方法,但无法:(
对话框的 PrimeFaces 文档指出,有一个 minimize、maximize 和 move 事件.
尝试使用
<p:ajax event="minimize" listener="#{bean.listener}" update="controls" />
在你的 p:dialog.
里面它是如何修复的:
Primefaces 版本 3.5.23 和 4.0.7 以及 5.0.0 已经实施了解决方法,不解决取消最大化事件,因为不可能只在取消最大化时调用该事件。
解决方法涉及手动更改文件 primefaces.js 中对话框 javascript 的 saveState 和 restoreState。方法是保存和恢复对话框内容的宽度和高度。
最好的方法是将解决方案从更高版本的 primefaces 或 elite 版本移植到 3.5。
我不知道也没有检查 primefaces < 6 但从那以后就不需要解决方法了。您可以像下面这样使用 ajax 事件:
<p:dialog widgetVar="myDialog"
header="Dialog"
onShow="updateClientSide()"
modal="true" blockScroll="true" responsive="true"
closable="true" closeOnEscape="true" maximizable="true"
height="80vh" width="80vw" minHeight="300" minWidth="330">
<p:ajax event="maximize" update="{id's to update}" onstart="updateClientSide()" process="@none"/>
<p:ajax event="restoreMaximize" update="id's to update" onstart="updateClientSide()" process="@none"/>
<div>
content
</div>
</p:dialog>
...
<script type="text/javascript">
function updateClientSide() {
your client side stuff
};
</script>
请注意,给定的示例仅适用于客户端回调,如果您想在服务器端处理事情,您需要向 p:ajax 标记添加一个侦听器并更新部分的进程值请求您的需求。
问候
编辑:请提及 Kukeltje 在 primefaces 扩展框架的帮助下执行纯客户端回调的评论。通过使用 pe:javascript libtag,仍然可以使用给定的 primefaces 组件提供的事件,但完全跳过了服务器端的循环。