Ext.Net中,DataView数据绑定之使用技巧。

(近期会连续更新有关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();



        }

Ext.Net中,DataView数据绑定之使用技巧。

 

 

你可能感兴趣的:(.net)