标签：
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
