RichFaces 日历和可滚动\扩展表格

以前我曾在jroller上发布了一篇文章，展示了如何通过使用单个组件实例来提高表单中所有日期输入的性能。今天我想用同样的方法来解决另一个常见问题。

浏览社区论坛时，我发现很多人在使用扩展/可滚动表格和绝对定位的嵌入组件时遇到了问题。这些组件可能会被表格边框截断。不幸的是，对于3.3.x版本中的表格组件来说，已经太迟进行标记重设计了，因为该分支只计划进行稳定化工作。

在这篇博客中，我想强调的是，对于rich:calendar组件，您可以使用原文中描述的解决方案使其在表格中嵌入时正常工作。我还会对文章中的代码示例进行小更新，以便与最新的RichFaces 3.3.3版本兼容。

让我们检查这个简单的表格定义

<rich:extendedDataTable
	value="#{dataBean.simpleList}" var="list"
	width="300px" height="400px"
	rowKeyVar="rowKey">
	<rich:column>
		<f:facet name="header">
			<h:outputText value="row number" />
		</f:facet>
		<h:outputText value="#{rowKey}" />
	</rich:column>
	<rich:column>
		<f:facet name="header">
			<h:outputText value="calendar" />
		</f:facet>
	<rich:calendar />
	</rich:column>
</rich:extendedDataTable>

它将产生以下有问题结果

现在我们将rich:calendar组件移出表格，并在列中用简单的输入和图标替换它，使用api激活它

日历定义（表格外）

<a4j:loadScript src="/scripts/calendarUtils.js"></a4j:loadScript>

<rich:calendar id="calendar" 
onchanged="#{rich:component('calendar')}.customInput.value=event.rich.component.getSelectedDateString();" zindex="1000"/>

<script>
	#{rich:component('calendar')}.customExpand=customExpand;
</script>

日期列定义

<rich:column>
	<f:facet name="header">
		<h:outputText value="calendar" />
	</f:facet>
	<h:inputText value="#{userBean.name}" id="input2" readonly="true"
	onclick="#{rich:component('calendar')}.customExpand(event, #{rich:element('input2')}, #{rich:element('button2')});" />
	<h:graphicImage
	value="resource:///org.richfaces.renderkit.html.iconimages.CalendarIcon"
	onclick="#{rich:component('calendar')}.customExpand(event, #{rich:element('input2')}, #{rich:element('button2')});"
	id="button2" />
</rich:column>

这些定义和calendarUtils.js代码在jroller帖子中有详细解释。我们唯一需要修正的是日历初始化的脚本。以下行应添加到calendarUtils.js中customExpand函数声明之后

function customExpand(e,input,button) {
	 if (!this.isRendered) {
		 this.isRendered = true;
		 this.render();
	 } 

	 ///the rest part fully the same as in original article

这个更改是因为3.3.3版本中的calendar实现了延迟初始化，如果没有在第一次调用时调用render方法，则将显示空的日历。

以下是扩展DataTable的预期结果