简单的 DataView

最新推荐文章于 2025-12-30 12:48:39 发布

原创最新推荐文章于 2025-12-30 12:48:39 发布 · 605 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext #javascript #server #date #border #string

Coolite Toolkit EXt 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个基于Ext框架的时间选择器组件实现细节。该组件通过DataView展示可选时间段，并使用JsonReader格式化时间数据，支持多选及点击事件触发自定义函数等功能。样式方面进行了定制以匹配整体布局。

<ext:Panel ID="Panel7" runat="server" AutoWidth="true" BodyStyle="background:none;" Border="false" Cls="mar10d"> <Body> <p id="city" style="width:90px;"> <span class="c0" >时间：</span> </p> <ext:Store ID="StoreTime" runat="server"> <Reader> <ext:JsonReader> <Fields> <ext:RecordField Name="StartTime" Type="Date" ></ext:RecordField> <ext:RecordField Name="EndTime" Type="Date" /> <ext:RecordField Name="TimeStr" Type="String" /> </Fields> </ext:JsonReader> </Reader> </ext:Store> <ext:DataView ID="DataView1" runat="server" StoreID="StoreTime" AutoHeight="true" Cls="cityList" MultiSelect="true" SelectedClass="act" ItemSelector="a" EmptyText=""> <Template ID="Template1" runat="server"> <tpl for="."> <a href="javascript:;" mce_href="javascript:;" >{TimeStr}</a> <%--Ext.util.Format.dateRenderer('Y-m-d H:i:s')--%> </tpl> </Template> <AjaxEvents > <Click OnEvent="Time_Click" > <EventMask ShowMask="true" MinDelay="1000" Target="CustomTarget" CustomTarget="#{GridPanel1}" /> <ExtraParams> <ext:Parameter Name="BP_StartTime" Value="Ext.util.Format.date(params[0].getStore().getAt(params[1]).data.StartTime, 'Y-m-d')" Mode="Raw"></ext:Parameter> <ext:Parameter Name="EndTime" Value="Ext.util.Format.date(params[0].getStore().getAt(params[1]).data.BP_EndTime, 'Y-m-d')" Mode="Raw"></ext:Parameter> <ext:Parameter Name="TimeStr" Value="params[0].getStore().getAt(params[1]).data.TimeStr" Mode="Raw"></ext:Parameter> </ExtraParams> </Click> </AjaxEvents> </ext:DataView> </Body> </ext:Panel>

<style>

.searchTop .cityList{margin-left:110px;}

</style>