表格视图——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

})

});

 

显示效果：