【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据、Store(Modal、Proxy)、ComboBox的用法等。
XTemplate绑定数据
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 = "吕布",
Gender = "男",
Age =
};
win1.Data = userInfo;
}
来看看显示效果:
使用Store处理数据
Store可以理解为一个数据容器,它包含Modal和Proxy。
- Modal:数据模型,包括一些字段等,通常与数据库中的字段、实体模型中的字段对应。
- Proxy:数据交互的代理,包括MemoryProxy、AjaxProxy、DirectProxy等
接下来是一个例子,这个例子中使用了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="6">
<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 Page_Load(object sender, EventArgs e)
{
BindDataView();
} protected void BindDataView()
{
List<UserInfo> userInfoList = new List<UserInfo>();
for (int i = ; i <= ; i++)
{
UserInfo userInfo = new UserInfo()
{
Name = "David" + i,
Gender = "男",
Age = + i
};
userInfoList.Add(userInfo);
}
storeUserInfo.DataSource = userInfoList;
storeUserInfo.DataBind();
}
css样式:
.info { border: 1px solid #ccc; padding:5px; margin:5px; width:280px; float:left; background:#efefef; }
效果如下:
Ext.Net Store的用法
介绍了如何使用数据,将数据绑定在一个DataView中进行显示,里面用到了Store,只不过那是一个直接绑定所有数据的Store,并不具备远程获取数据、远程排序、分页等功能,今天我们来看看如何实现。
使用Handler处理分页
首先来创建一般处理程序,我命名为StoreHandler.ashx,然后它的处理过程代码如下:
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var requestParams = new StoreRequestParameters(context);
int start = requestParams.Start;
int limit = requestParams.Limit;
DataSorter[] sorter = requestParams.Sort;
DataFilter[] filter = requestParams.Filter; Paging<UserInfo> employees = GetPageData(start, limit, filter, sorter);
context.Response.Write(JSON.Serialize(employees));
}
这个方法中,我们首先使用HttpContext创建一个StoreRequestParameters对象,这个对象中包含Start、Limit、Page、Sort、Filter、Group等参数。
- Start:从第几行开始获取数据记录
- Limit:获取数据的量,一次获取多少行数据
- Page:当前的页码
- Sort:排序的条件集合
- Filter:过滤的条件集合
- Group:分组的条件集合
我们在获取到这些数据以后,通过GetPageData来取到符合条件的数据,然后创建一个Paging<T>类的实例,这个类中包含了Data和TotalRecords两个重要的属性
- Data:IEnumerable<T>类型的数据集合
- TotalRecords:数据总行数,用于客户端分页(生成页码)
我们的获取数据方法的代码如下:
public Paging<UserInfo> GetPageData(int start, int limit,
DataFilter[] filter, DataSorter[] sorter)
{
var userInfoList = UserInfo.GetData(); Paging<UserInfo> result = new Paging<UserInfo>();
result.TotalRecords = userInfoList.Count;
result.Data = userInfoList.Skip(start).Take(limit).ToList(); return result;
}
Index.aspx.cs文件部分代码:
public partial class Index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) { }
}
public class UserInfo
{
public string Name { get; set; }
public string Gender { get; set; }
public int Age { get; set; }
public static List<UserInfo> GetData()
{
List<UserInfo> userInfoList = new List<UserInfo>();
for (int i = ; i <= ; i++)
{
UserInfo userInfo = new UserInfo()
{
Name = "David" + i,
Gender = "男",
Age = + i
};
userInfoList.Add(userInfo);
}
return userInfoList;
}
}
有了这个handler,我们接下来需要对Store进行改造:
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" RemoteFilter="true" RemoteSort="true">
<Model>
<ext:Model ID="Model1" 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>
<Proxy>
<ext:AjaxProxy Url="StoreHandler.ashx">
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="data" />
</Reader>
</ext:AjaxProxy>
</Proxy>
</ext:Store>
AjaxProxy的Url就是我们的Handler地址。ActionMethods是请求方式,JsonReader是reader属性,它获取的数据根节点是data。这里都是根据ExtJS中ajaxproxy来定义的,你可以通过看原文博主之前的文章来了解这方面的内容:ExtJS 4.2 教程-06:服务器代理(proxy) ,显示效果和前面的一样。
PageProxy分页的实现
PageProxy是Ext.Net实现的一种分页方式,它与使用handler的方式不同,PageProxy通过实现OnReadData事件来完成分页。
这里我们直接看Store的代码:
<ext:Store runat="server" ID="storeUserInfo" PageSize="6" OnReadData="storeUserInfo_ReadData">
<Model>
<ext:Model ID="Model1" 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>
<Proxy>
<ext:PageProxy></ext:PageProxy>
</Proxy>
</ext:Store>
然后再后台代码中实现storeUserInfo_ReadData:
protected void storeUserInfo_ReadData(object sender, Ext.Net.StoreReadDataEventArgs e)
{
int start = e.Start;
int limit = e.Limit; var userInfoList = UserInfo.GetData();
e.Total = userInfoList.Count; storeUserInfo.DataSource = userInfoList.Skip(start).Take(limit).ToList();
storeUserInfo.DataBind();
}
显示效果也和之前一样。
Ext.Net ComboBox用法
ComboBox是最常用的控件之一,它与HTML中的Select控件很像,但可以进行多选、自定义显示格式、分页等。
ComboBox用法
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID">
<Store>
<ext:Store runat="server" ID="storeUserInfo">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<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>
</ext:ComboBox>
对于一个ComboBox来说,一定要制定DisplayField和ValueField,然后它包含了一个Store,这个Store我们并不陌生,之前的几篇中都用过。
然后我们在页面加载的时候为Store绑定上数据:
public void BindStore()
{
storeUserInfo.DataSource = UserInfo.GetData();
storeUserInfo.DataBind();
}
这样一个简单的ComboBox示例就完成了,效果如下:
ComboBox分页
当数据量大的时候,我们当然希望能够进行分页显示,这个功能ComboBox是支持的。
首先我们需要对Store进行分页处理,前面已经介绍过,此处不再赘言。
然后我们要在ComboBox的定义中加上分页的PageSize属性:
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" PageSize="5">
再次刷新我们的页面,你会发现ComboBox已经支持分页了,效果如下:
ComboBox自定义显示
ComboBox支持通过XTemplate来自定义每一项的显示。
<ext:ComboBox runat="server" ID="cmbUserList" DisplayField="Name" ValueField="ID" MatchFieldWidth="false" PageSize="5">
<Store>
...
</Store>
<ListConfig>
<ItemTpl runat="server">
<Html>
<div>
<b>{Name}</b><br />
<span>年龄:{Age}</span><br />
<span>性别:{Gender}</span>
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
效果如下:
来源:
Ext.Net学习笔记09:Ext.Net Store的用法
Ext.Net学习笔记10:Ext.Net ComboBox用法
【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法的更多相关文章
- Ext.Net学习笔记04:Ext.Net布局
ExtJS中的布局功能很强大,常用的布局有border.accordion.fit.hbox.vbox等,Ext.Net除了将这些布局进行封装以外,更是对border进行了一些非常实用的改进,让我们来 ...
- Python学习笔记之从文件中读取数据
10-1 Python 学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学到的Python 知识,其中每一行都以“In Python you can”打头.将这个文件命名为learnin ...
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- 【Ext.Net学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
GridPanel 折叠/展开行 Ext.Net GridPanel的行支持折叠/展开功能,这个功能个人觉得还说很有用处的,尤其是数据中包含图片等内容的时候. 下面来看看效果: 使用行折叠/展开功能之 ...
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...
- 【Ext.Net学习笔记】03:Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局 中已经简单的 ...
- Ext.Net学习笔记22:Ext.Net Tree 用法详解
Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...
- Ext.Net学习笔记23:Ext.Net TabPanel用法详解
Ext.Net学习笔记23:Ext.Net TabPanel用法详解 上面的图片中给出了TabPanel的一个效果图,我们来看一下代码: <ext:TabPanel runat="se ...
随机推荐
- cppcheck
http://sourceforge.net/projects/cppcheck/files/?source=navbar https://github.com/danmar/cppcheck htt ...
- SQL SERVER获取数据库文件信息
MS SQL SERVER 获取当前数据库文件等信息,适用于多个版本: SELECT dbf.file_id AS FileID , dbf.name AS [FileName] , s.fi ...
- 误报的java.sql.SQLException: Parameter number 21 is not an OUT parameter
今天为了模拟一个mysql内存不释放问题,要测试一个存储过程,同时具有出参和入参,启动时报了上述错误. <select id="funcl_trd_secu_execution_que ...
- 学习总结——DOM
DOM(Document Object Model),即文档对象模型.DOM是针对HTML和XML文档的一个API,它描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分.在定义方面, ...
- windows 8 设置hyper-v网络设置
1 windwos 8 设置hyperv 比较简单,和装操作系统都不多做解释.我只多说说网络的设置问题,因为可能装提windows 2008虚拟机,根据网上设置网络的方式都是要不然只能虚拟 机上网 , ...
- 【DNN】C#中类的一些特性标注
[AttributeUsage] 其实AttributeUsage类就是描述了一个定制特性如和被使用. C# AttributeUsage的使用要明白: AttributeUsage有三个属性,我们可 ...
- MSCRM 2011 操作大全
CRM字段类型:货币:new Money(Decimal){SQL更新Money类型字段,需要同时更新_base字段,存在汇率差的时候值不同}查找:new EntityReference(object ...
- 学写了一段LINQ
要写一段代码读入一个用空格分隔的几列的文件,程序中有多处类似的文件,所以想着有没有什么好点的办法. 井名 X坐标 Y坐标 深度 测试井1 634600 ...
- FastDFS+Nginx轻量级分布式
一 简介 FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载体的在线 ...
- Android项目实战(十四):TextView显示html样式的文字
项目需求: TextView显示一段文字,格式为:(消息个数,不确定)条消息 这段文字中名字和数字的长度是不确定的,还要求名字和数字各自有各自的颜色. 一开始我想的是用(转) SpannableStr ...