Ext Js 表格（五）

表格由Ext.grid.GridPanel来定义，继承Ext.Panel。表格必须包含列定义信息，并指定表格的数据存储器。表格的列定义信息由Ext.grid.ColumnModel来定义，数据存储信息由Ext.data.Stroe（Ext.data.SimpleStore，Ext.data.JsonStore，Ext.data.GroupingStore）来定义。

类Ext.grid.GridView，GridView类是对Ext.grid.GridPanel用户界面的封装。为 产生特殊的现实效果，可以该类的一些方法来控制用户界面。注意请不要改变用户界面的DOM结构。

  ColumnModel负责创建表格的列信息，表格的列信息包含首部的显示文本（header），对应的记录集字段（dataIndex），列是否可排序（sortable），列渲染函数（renderer），宽度（width），格式化（format）信息

         一个完整的表格代码：

                   //复选框，身兼两职，既要放在ColumnModel里,又要放在GridPanel里

var sm = new Ext.grid.CheckboxSelectionModel();

                var cm = new Ext.grid.ColumnModel([

                         new Ext.grid.RowNumberer(),  // 自动显示行号

                         sm, // columnmodel里

                         {header: "姓名",

                                   dataIndex: "name",// 对应的记录集字段

                                   enableColumnMove:true, // 列可以拖放

                                   enableColumnResize:true, // 列宽度可变

                                   width: 80,  // 舍得列的宽度

                                   sortable: true, //使列可排序

                                   renderer: function(value){// 渲染函数（renderer函数的参数有多个，详细可以查看API文档）

                                            if(value.length> 6){

                                                     return"<span style='color:red;'>"+value+"</span>"

                                            }else{

                                                     return"<span style='color:blue;'>"+value+"</span>";

                                            }

                                   }

                         },

                         {header: "年龄",dataIndex: "age"}

                ]);

                var store = new Ext.data.Store({

                         proxy: new Ext.data.HttpProxy({url:"<%=path%>/test"}),

                         reader: new Ext.data.JsonReader({

                                   totalProperty: "total",  // 该属性指定记录数的总数

                                   root: "root",  // 该属性指定包含所有行对象的数组

                                   idProperty: "id"  // 记录每一行对象记录id的字段（可选）

                         },[

                                   {name: "id"},

                                   {name: "name",mapping:"na_me"},

                                   {name: "age",mapping:"a_ge"}

                         ])

                });

                var grid = new Ext.grid.GridPanel({

                         renderTo: "grid",

                         cm: cm,

                         sm: sm,

                         store: store,

                         autoHeight: true,

                         bbar: new Ext.PagingToolbar({

                                   pageSize:10,   // 每页显示几条数据

                                   store: store,

                                   displayInfo: true,  // 必须为ture，displayMsg才能显示

                                   displayMsg: "显示第{0}条到第{1}条记录，一共{2}条记录",

                                   emptyMsg: "记录为空"  // 没有记录的提示信息

                         })

                });

                store.load({

                         params:{start: 0,limit: 10}// 从0开始，最多取10条

                }); // 必须在构造表格后执行，否则分页工具将不起作用

         选择模型：

                   grid.on("click",function(){

                         // 获得选择模型，通过选择模型选择当前选中的行。

                         var selections =grid.getSelectionModel().getSelections();

                         for(var i=0;i<selections.length; i++){

                                   var record =selections[i];

                                   Ext.Msg.alert("提示",record.data.name + "--" + record.get("age")+ "--" + record.get("id"));

                         }

                });

         表格视图：Ext.grid.GridView:

                   Ext.data.Store可以看做model，Ext.grid.GridPanel可以看做controller，而Ext.grid.GridView可以看做view，通常情况下不用创建GridView的实例，GridPanel可以自动创建GridView的实例，可以通过gird.getView()获取当前的实例。我们可以在创建GridPanel时，通过viewConfig参数，作为初始化参数传递给GridView。

常用参数：

forceFit: true时，表格自动延伸每列长度，使内容填充表格。

ColumnText、sortAscText、sortDescText设置每列下拉菜单中得“显示的列”、“升序”、“降序”这三个部分的显示文字。