(近期会连续更新有关Ext.Net 控件的一些资料,与大家分享,有兴趣或者最近也在研究这方面知识的朋友可以加关注!!!)
DataView 是一种数据视图控件,与GridPanel相比,最大的优势就是在内容上,布局可以随心所欲。
DataView 数据绑定的方法和GridPanel是一样的。
用过GridPanel的朋友一定相当清楚:GridPanel在数据绑定的时候,只要在对应控件中,添加DataIndex属性,然后对应到数据源中Name的值就可以了。
那么在DataView也是采用这样的方法,只是在写法上略有不同。
特别要注意的是:DataView需要设置ItemSelector属性。
下面我们看一下代码:
页面源码:
<ext:ResourceManager ID="ResourceManager1" runat="server" /> <ext:Window ID="Window1" runat="server" Width="200" Height="400" Title="我的日程" Icon="Date" Closable="false" BodyPadding="5" BodyStyle="background-color:white;" Layout="FitLayout"> <Items> <ext:DataView ID="DataView1" runat="server" DisableSelection="true" ItemSelector="div.ss" EmptyText="No customers to display"> <Store> <ext:Store ID="Store1" runat="server"> <Model> <ext:Model ID="Model1" runat="server"> <Fields> <ext:ModelField Name="message" /> <ext:ModelField Name="Icon" /> <ext:ModelField Name="date" Type="Date" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Tpl ID="Template1" runat="server"> <Html> <tpl for="."> <p> <img src="{Icon}"/>{message}</p> <div class="ss" style="color:gray;" >{date:date("H:m:s")}</</div> <hr /> </tpl> </Html> </Tpl> </ext:DataView> </Items> </ext:Window>
后台代码:
protected void Page_Load(object sender, EventArgs e) { Store1.DataSource = new List<object> { new { message = "起床", date = DateTime.UtcNow.AddHours(4),Icon="images/15.png" }, new { message = "早餐", date = DateTime.UtcNow.AddHours(5) ,Icon="images/15.png"}, new { message = "上班", date = DateTime.UtcNow.AddHours(6),Icon="images/15.png" }, new { message = "接儿子放学", date = DateTime.UtcNow.AddHours(-10) ,Icon="images/15.png"}, new { message = "和老婆看电影", date = DateTime.UtcNow.AddHours(-8),Icon="images/15.png" } }; Store1.DataBind(); }