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设置每列下拉菜单中得“显示的列”、“升序”、“降序”这三个部分的显示文字。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章