Ext.Net学习笔记11:Ext.Net GridPanel的用法
2014-02-24 20:45
471 查看
GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似。
在这段代码中,有两个重要的组成:Store和ColumnModel。
Store是我们之前已经介绍过的,它相当于一个数据仓库,可以为我们提供要显示的数据。至于获取数据的方式,我们这里使用最简单的一次家在所有数据。
ColumnModel是列模型,它表示列的显示方式。下面来看一下它的主要属性:
DataIndex:要显示的字段名,与Store中ModelField的Name相对应。
Text:列头(标题),相当于HeaderText
Width:列宽,如果要想该列自动填充,则需要使用Flex属性
我们后台的代码如下:
在页面加载的时候绑定数据。没有什么新鲜的,之前的章节中已经介绍过Store绑定数据的几种方式。
整个示例的效果如下:
然后我们为GridPanel添加PagingToolBar:
这个PagingToolBar的StoreID属性设置为GridPanel的Store,这样就大功告成了。
我们来看一下效果:
值得称赞的是,在使用分页的情况下,Ext.Net GridPanel能够保持换页后的选择。
今天这篇笔记简单的介绍了Ext.Net GridPanel的用法,更多复杂的用法将在后面的笔记中介绍。
起飞网原创首发,转载请注明出处。
原文链接:http://www.qeefee.com/article/extnet-learn-11-simple-gridpanel
GridPanel用法
直接看代码:<ext:GridPanel runat="server" ID="grid" ColumnLines="true" Width="500" Height="200"> <Store> <ext:Store runat="server" ID="storeUserInfo"> <Model> <ext:Model ID="UserInfoModel" 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> <ColumnModel> <Columns> <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column> <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column> <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column> <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age"></ext:NumberColumn> </Columns> </ColumnModel> </ext:GridPanel>
在这段代码中,有两个重要的组成:Store和ColumnModel。
Store是我们之前已经介绍过的,它相当于一个数据仓库,可以为我们提供要显示的数据。至于获取数据的方式,我们这里使用最简单的一次家在所有数据。
ColumnModel是列模型,它表示列的显示方式。下面来看一下它的主要属性:
DataIndex:要显示的字段名,与Store中ModelField的Name相对应。
Text:列头(标题),相当于HeaderText
Width:列宽,如果要想该列自动填充,则需要使用Flex属性
我们后台的代码如下:
protected void Page_Load(object sender, EventArgs e) { BindStore(); } public void BindStore() { storeUserInfo.DataSource = UserInfo.GetData(); storeUserInfo.DataBind(); }
在页面加载的时候绑定数据。没有什么新鲜的,之前的章节中已经介绍过Store绑定数据的几种方式。
整个示例的效果如下:
Ext.Net GridPanel分页(Paging)
我们这里让然使用上面的Store,由于用到了分页,所以需要给Store添加PageSize属性:<ext:Store runat="server" ID="storeUserInfo" PageSize="5"> <Model> <ext:Model ID="UserInfoModel" 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>
然后我们为GridPanel添加PagingToolBar:
<BottomBar> <ext:PagingToolbar runat="server" ID="gridPaging" StoreID="storeUserInfo"></ext:PagingToolbar> </BottomBar>
这个PagingToolBar的StoreID属性设置为GridPanel的Store,这样就大功告成了。
Ext.Net GridPanel显示行号
只需要修改ColumnModel,为它添加一个行号列就可以了:<ColumnModel> <Columns> <ext:RowNumbererColumn runat="server"></ext:RowNumbererColumn> <ext:Column runat="server" ID="columnID" Width="100" Text="ID" DataIndex="ID"></ext:Column> <ext:Column runat="server" ID="columnName" Width="200" Text="姓名" DataIndex="Name"></ext:Column> <ext:Column runat="server" ID="columnGender" Width="50" Text="性别" DataIndex="Gender"></ext:Column> <ext:NumberColumn runat="server" ID="columnAge" Width="60" Text="年龄" DataIndex="Age"></ext:NumberColumn> </Columns> </ColumnModel>
Ext.Net GridPanel 显示选择框(CheckBox)
Ext.Net GridPanel的选择框列是通过SelectionModel来实现的。我们来添加一个选择框列:<SelectionModel> <ext:CheckboxSelectionModel runat="server" Mode="Simple"></ext:CheckboxSelectionModel> </SelectionModel>
我们来看一下效果:
值得称赞的是,在使用分页的情况下,Ext.Net GridPanel能够保持换页后的选择。
今天这篇笔记简单的介绍了Ext.Net GridPanel的用法,更多复杂的用法将在后面的笔记中介绍。
起飞网原创首发,转载请注明出处。
原文链接:http://www.qeefee.com/article/extnet-learn-11-simple-gridpanel
相关文章推荐
- Ext.Net学习笔记11:Ext.Net GridPanel的用法
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
- 【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)
- ExtAspNet GridPanel的一般用法
- Ext.Net学习笔记23:Ext.Net TabPanel用法详解
- 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)
- ExtAspNet.GridPanel的一般用法
- Ext.grid.GridPanel + asp.net 数据分页
- Ext.Net 1.x_Ext.Net.GridPanel之Filters 过滤数据
- Ext.Net 1.x_Ext.Net.GridPanel根据内容判断行背景色
- Ext.Net-GridPanel基础使用方法一
- [Ext.Net]GridPanel之Access数据库分页显示
- Ext.Net学习笔记15:Ext.Net GridPanel 汇总(Summary)用法
- [EXT.NET]GridPanel列表增删改预览
- Ext.Net 使用总结之GridPanel中的选中行
- [Ext.Net]TreePanel+gridPanel实例
- [EXT.NET]GridPanel列表增删改预览
- Ext.Net 使用总结之GridPanel中的选中行
- [EXT.NET]GridPanel序号宽度自适应
- Ext.Net 1.2.0_利用 Ext.Net 自定义 GridPanel Ajax 控件