Ext的网格研究

 

Ext的网格在我看来就是html的表格，但是它提供了比表格更多的功能。在Ext中网格的主要代表类是：Ext.grid.Grid它代表了Ext网格的主体，但它不是全部，还其它一些相关的类，要弄清楚网格的结构，就是先清楚这些相关类的构成。下面就逐个看一看与网格相关的一些类：

1.     Ext.grid.ColumnModel

此类实际是对网格数据的一个抽象，因为网格是一个二维表，与关系型数据库一样，必须对数据的结构进行定义，Ext.grid.ColumnModel就是对数据结构的一个抽象类，但是在《Ext的数据源结构》中已经说过Record类是对记录结构一个抽象，这里怎么又有一个对数据结构的抽象呢？实际上它们的抽象是有相似之处的，实际上对于网格的定义它需要两个主要的配置对象：1就是需要一个数据源Store；2就是需要一个列模型。对一张二维表两个不同的抽象它们有相似之处，但Record的抽象侧重于内在的表示；而列模型侧重于外在的表现。对比一个它们的构造：

var TopicRecord = Ext.data.Record.create(

        {name: 'title', mapping: 'topic_title'},

        {name: 'author', mapping: 'username'},

        {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},

        {name: 'lastPost', mapping: 'post_time', type: 'date'},

        {name: 'lastPoster', mapping: 'user2'},

        {name: 'excerpt', mapping: 'post_text'}

);

以上为对一张二维表结构的抽象，下面在看一下对一个列模型的构造：

var colModel = new Ext.grid.ColumnModel([

      {header: "Ticker", width: 60, sortable: true, locked: true},

      {header: "Company Name", width: 150, sortable: true},

      {header: "Market Cap.", width: 100, sortable: true},

{header: "$ Sales", width: 100, sortable: true, renderer: money},

{header: "Employees", width: 100, sortable: true, resizable: false}

 ]);

建立列模型的配置选项有：

align : String

设置列的对齐方式

dataIndex : String

在网格中的Ext.data.Store的Ext.data.Record定义的字段名

header : String

显示在网格视图中的表头

hidden : Boolean

是否隐藏.

locked : Boolean

当在滚动视图的时候此列是否被锁定

renderer : Function

此列的渲染器

resizable : Boolean

是否允许可以改变列宽.

sortable : Boolean

是否允许此列可以排序