表格视图——Ext.grid.GridView

Ext的表格控件都遵守MVC模型，Ext.data.Store可看做Model模型，Ext.grid.GridPanel中设置的各种监听器可看做Controller控制器，而Ext.grid.GridView对应的就是View视图。通常情况下，我们不需要创建Ext.grid.GridView的实例，Ext.grid.GridPanel会自动生成对应的实例，使用默认的样式将表格显示到页面上。当我们要操作Ext.grid.GridView的属性时，可以通过Ext.grid.GridPanel.getView()来获取当前表格使用的视图实例。

代码：

// 滚动到表格的顶部

    Ext.get("gridview-scroll-to-top").on("click",function() {

        grid1.getView().scrollToTop(); 

    });

 

    Ext.get("gridview-focus-cell").on("click",function() {

        //将焦点移到第3行第3个单元格

        grid1.getView().focusCell(2,2);

        //获取第3行第3个单元格

        var cell01 =grid1.getView().getCell(2,2);

        //设置第一个单元格的背景

        cell01.style.backgroundColor ='red';

        alert(cell01.innerText);

    });

显示效果：

 

从上面可以看出，与GridView相关的操作都集中在视图的显示功能部分。如果我们要对表格的显示效果进行调整，可以通过GridView进行设置，但是grid.getView()必须是创建完Ext.grid.GridPanel之后才能调用。如果我们希望在创建GridView时设置一些初始化参数，可以使用Ext.grid.GridPanel的viewConfig参数，如下所示：

var grid1 =newExt.grid.GridPanel({

    title : '员工信息',

    renderTo : 'grid1',

    cm : cm,

    store : store,

    width : 700,

    height : 120,

    enableColumnMove : false,

    enableColumnResize : true,

    loadMask : true,

     viewConfig:{

        forceFit:true,//表格自动延伸每列的宽度，使之填满整个表格。

        getRowClass:function(record,rowIndex,p,ds){

            if (rowIndex %2 == 0) {

                return'oushu-row-color';

            }

            return'jishu-row-color';

        },

        columnsText:"显示的列",

        scrollOffset:30,//表格右侧为滚动条预留的宽度

        sortAscText:"升序",

        sortDescText:"降序"

    },

    autoExpandColumn : 'descn',

    //sm:sm,

    sm:newExt.grid.RowSelectionModel({

        singleSelect:true

    })

});

 

显示效果：