标签:
XTemplate是个模板,当我们为一个XTemplate绑定数据之后,将会按照模板的预定格式进行显示。
<ext:Window runat="server" ID="win1"Title="XTemplates用法" Width="300" Height="200">
<Tpl runat="server">
<Html>
<div class="info">
<p>姓名:{Name}</p>
<p>性别:{Gender}</p>
<p>年龄:{Age}</p>
</div>
</Html>
</Tpl>
</ext:Window>
然后我们有一个这样的实体类:
public class UserInfo
{
public string Name { get; set; }
public string Gender { get; set; }
public int Age { get; set; }
}
UserInfo类中的字段分别对应模板中字段对应。然后我们在页面加载的时候完成数据绑定:
protected void Page_Load(object sender, EventArgs e)
{
UserInfo userInfo = new UserInfo()
{
Name = "QeeFee",
Gender = "M",
Age = 30
};
win1.Data = userInfo;
}
来看看显示效果:
Store可以理解为一个数据容器,它包含Modal和Proxy。
接下来是一个例子,这个例子中使用了DataView来显示数据,使用Store来提供数据,这个例子仍然使用我们上面的UserInfo类。
<ext:Panel runat="server" Width="600" Height="400" AutoScroll="true">
<Items>
<ext:DataView runat="server" ID="myDataView" ItemSelector=".info">
<Store>
<ext:Store runat="server" ID="storeUserInfo" PageSize="5">
<Model>
<ext:Model runat="server" IDProperty="Name">
<Fields>
<ext:ModelField Name="Name" Type="String"></ext:ModelField>
<ext:ModelField Name="Gender" Type="String"></ext:ModelField>
<ext:ModelField Name="Age" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Tpl runat="server">
<Html>
<tpl for=".">
<div class="info">
<p>姓名:{Name}</p>
<p>性别:{Gender}</p>
<p>年龄:{Age}</p>
</div>
</tpl>
</Html>
</Tpl>
</ext:DataView>
</Items>
<BottomBar>
<ext:PagingToolbar runat="server" StoreID="storeUserInfo"></ext:PagingToolbar>
</BottomBar>
</ext:Panel>
在这段代码中,我们定义了一个DataView,DataView中包含了一个Store和一个Tpl模板,在代码的最后,我们添加了分页处理,使用了PagingToolbar。我们在后台代码中为Store绑定数据:
protected void BindDataView()
{
List<UserInfo> userInfoList = new List<UserInfo>();
for (int i = 1; i <= 12; i++)
{
UserInfo userInfo = new UserInfo()
{
Name = "QeeFee" + i,
Gender = "M",
Age = 30 + i
};
userInfoList.Add(userInfo);
}
storeUserInfo.DataSource = userInfoList;
storeUserInfo.DataBind();
}
其他的一些代码:
var MyApp = {
userInfo: {
prepareData: function (data) {
data.Gender = data.Gender == "M" ? "男" : "女";
return data;
}
}
};
上面的js代码用来处理数据
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }
上面的css代码用来处理显示样式
OK,来看看效果吧:
注意,在这段代码中有一个坑,就是用来处理数据的那段js,莫名其妙的执行两次,还没有找到原因。
OK,以上就是这篇文章的内容,下一篇中将介绍Ext.Net Store 如何异步的获取数据、服务器分页等。
标签:
原文地址:http://www.cnblogs.com/dwuge/p/5261322.html