日期:2014-05-16  浏览次数:20335 次

EXTJS中的表格控件(一)

网络编程语言中,除了.net其他的基本没有提供网格控件,而最近的asp.net mvc也不倡议使用传统的服务器控件,绑定数据需要自己拼表格,所以兼容各种语言的表格控件就变得流行起来。

本章我们主要学习:

如何定义一个网格控件;

如何绑定网格控件;

一、Ext的表格控件是什么?

同样先来看看几个效果:

这个是最基本的表格,Ext中的表格最基本的功能就是按列排序,按列筛选,定制列等。当然还有一些特有的功能:

可以对每行数据进行收缩,也可以点击右上角小三角收缩整个表格控件。

还可以很方便的进行分页操作:

以及动态的修改提交等功能:

二、Ext如何构造网格?

表格控件其实也就是帮我们完成了数据的填充工作而已,具体的数据源、要显示的列,列的定制、数据源中的哪条数据显示在哪个列中等属性还是需要我们自己手动配置的,所以我们分下面几步来完成网格控件的数据绑定:

1、定义表格:
定义一个表格比较简单,只需要new几个列即可,带上列的名称和要绑定的数据,定义列代码如:

var cm = new Ext.grid.ColumnModel([ 
{ header: '
编号
', dataIndex: 'id' }, 
{ header: '
性别
', dataIndex: 'sex' }, 
{ header: '
名称
', dataIndex: 'name' }, 
{ header: '
描述
', dataIndex: 'desc' } 
]);

 

header指定列名,用dataIndex指定数据源,也就是字段名。这样一个基本的表&#