Ext.Net学习笔记10: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进行分页处理,前面的Ext.Net学习笔记08:使用数据和Ext.Net学习笔记09:Ext.Net中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学习笔记10:Ext.Net ComboBox用法的更多相关文章
- 【Ext.Net学习笔记】04:Ext.Net中使用数据、Ext.Net Store的用法、Ext.Net ComboBox用法
之前的几篇文章都是介绍Ext.Net较为基础的东西,今天的这一篇将介绍数据的一些用法,包括XTemplate绑定数据.Store(Modal.Proxy).ComboBox的用法等. XTemplat ...
- 【Ext.Net学习笔记】02:Ext.Net用法概览、Ext.Net MessageBus用法、Ext.Net布局
Ext.Net用法概览 Ext.Net还是很强大,如果运用熟练可以极大的提高编程效率.如果你也要学习Ext.Net,原文博主推荐书籍:<Ext.Net Web 应用程序开发教程>,是英文的 ...
- Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation)
Ext.Net学习笔记21:Ext.Net FormPanel 字段验证(validation) 作为表单,字段验证当然是不能少的,今天我们来一起看看Ext.Net FormPanel的字段验证功能. ...
- 【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学习笔记】01:在ASP.NET WebForm中使用Ext.Net
Ext.NET是基于跨浏览器的ExtJS库和.NET Framework的一套支持ASP.NET AJAX的开源Web控件,包含有丰富的Ajax运用,其前身是Coolite. 下载地址:http:// ...
- Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- Ext.Net学习笔记22:Ext.Net Tree 用法详解
Ext.Net学习笔记22:Ext.Net Tree 用法详解 上面的图片是一个简单的树,使用Ext.Net来创建这样的树结构非常简单,代码如下: <ext:TreePanel runat=&q ...
随机推荐
- SQL Server查询性能优化——创建索引原则(一)
索引是什么?索引是提高查询性能的一个重要工具,索引就是把查询语句所需要的少量数据添加到索引分页中,这样访问数据时只要访问少数索引的分页 就可以.但是索引对于提高查询性能也不是万能的,也不是建立越多的索 ...
- iOS设备的硬件适配 (关于armv6, armv7, armv7s ) <转>
<转> http://blog.csdn.net/smking/article/details/8148702 1.OpenGL ES版本支持 iPhone:iPhone 3G以下(包 ...
- php5.5 yum源
PHP官网在下载页面中只有源代码下载,当然使用编译安装也是可以的,但是使用二进制包安装会非常快速.虽然PHP官网没有提供二进制安装包,但是它推荐了两个第三方的YUM源(CentOS中默认的YUM安装的 ...
- Mozilla NPAPI开发示例之一(VS2012 + Win7(64位))
入门级的NPAPI开发. NPAPI & NPRuntime 简介 Netscape Plugin Application Programming Interface (NPAPI) NPAP ...
- ASIHTTPRequest 中url参数中文乱码
ASIHTTPReques确实是在开发过程中,数据的传输,获取方面给我们很大的帮助.然而在一些方面也是需要一些的注意. 在我们使用ASIHTTPReques 进行get方式获取数据时,如果需要传入中文 ...
- jsp <c:forEach> 判断第一条 或 最后一条记录
<c:forEach>标签具有以下一些属性: var:迭代参数的名称.在迭代体中可以使用的变量的名称,用来表示每一个迭代变量.类型为String. items:要进行迭代的集合.对于它所支 ...
- openCV 2.4.13 iOS background_segm.hpp 'list' file not found
最近下载了最新版的OpenCV的Framework. 导入到项目里边,编译.然后就出现了问题 /opencv2.framework/Headers/video/background_segm.hpp: ...
- 一段经典的node.js 数据库高并发实现
var proxy = new EventProxy();var status = "ready";var select = function(callback){ proxy.o ...
- iOS_icon命名规范 (iPhone_retina屏幕开发)
iOS_icon命名规范 (iPhone_retina屏幕开发) 规则: 位置名称_功能名称_ 详细区分标志名称@2x.png navigationItem_leftBackIcon@2x.png ...
- solr使用方法 完全匹配
最近一直被solr的搜索困扰,搜索汉字时不能搜索出自己想要的内容,经过研究和查询发现,问题出在没有完全匹配上,主要还是对solr使用不太熟练. 解决方法:以前UserRealname:某某家长,这样搜 ...