EXTJS 4.2 资料 控件之Grid 那些事

时间:2021-08-08 16:24:03

最近在学习Extjs4.2 ,积累文章,看得不错,再此留年:

//表格数据最起码有列、数据、转换原始数据这3项
Ext.onReady(function(){
//定义列
var columns = [
{header:'编号',dataIndex:'id',width:}, //sortable:true 可设置是否为该列进行排序
{header:'名称',dataIndex:'name',width:},
{header:'描述',dataIndex:'descn',width:},
{header:'状态',dataIndex:'status',width:,renderer:function(value){
if(value=='可用'){
return "<span style='color:green;font-weight:bold';>可用</span><img src='images/right.gif' />";
} else {
return "<span style='color:red;font-weight:bold';>禁用</span><img src='images/wrong.gif' />";
}
}}
];
//定义数据
var data =[
['','小王','描述01','可用'],
['','李四','描述02','禁用'],
['','张三','描述03','可用'],
['','束洋洋','思考者日记网','可用'],
['','高飞','描述05','禁用']
];
//转换原始数据为EXT可以显示的数据
var store = new Ext.data.ArrayStore({
data:data,
fields:[
{name:'id'}, //mapping:0 这样的可以指定列显示的位置,0代表第1列,可以随意设置列显示的位置
{name:'name'},
{name:'descn'},
{name:'status'}
]
});
//加载数据
store.load();
//表格控件默认使用RowModel,按住shift或者ctrl键单击鼠标就可以选择多行,如果希望只选择一行,可以使用singleSelect:true
//我发现我在写的时候,不用的情况下,我试了发现默认就是不可多选的
//var sm = new Ext.grid.RowModel({singleSelect:true});
//创建表格
var grid = new Ext.grid.GridPanel({
renderTo:'grid', //渲染位置
width:,
height:,
//selModel:sm,
store:store, //转换后的数据
columns:columns, //显示列
stripeRows:true, //斑马线效果
//enableColumnMove: false, //禁止拖放列
//enableColumnResize: false, //禁止改变列宽度
loadMask:true, //显示遮罩和提示功能,即加载Loading……
//forceFit:true //自动填满表格
viewConfig:{
columnsText:'显示的列',
scrollOffset:, //表格右侧为滚动条预留的宽度,默认为20
sortAscText:'正序',
sortDescText:'倒序',
forceFit:true //表格会自动延展每列的长度,使内容填满整个表格
}
});
});

1.自定义grid的renderer 方法

a.function renderMotif

/改变列颜色自定义renderner方法
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('name');
cell.style="background-color:"+value;
return data;
}

列中引用:

{header:'名称',dataIndex:'name',width:, renderer:renderMotif},  

b.function  renderDescn

{header:'描述',dataIndex:'descn',width:,renderer:renderDescn}  

//自定义renderner方法

function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){
var str="<input type='button' value='查询详细信息' onclick='alert(""+
"这个单元格的值是:"+value +"n"+
"这个单元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+
"这个单元格对应行的record是:"+record +",一行的数据都在里面n"+
"这是第"+rowIndex+"行n"+
"这是第"+columnIndex +"列n"+
"这个表格对应的Ext.data.Store在这里:"+ store +",随便用吧。"+"")' />";
return str;
}

说明:

我们可以在渲染函数里得到多个参数,如下所示:

  1. value:将要显示到单元格里的值;
  2. cellmeta:单元格的相关属性,主要有id和CSS;
  3. record:这行的数据对象,如果需要获取其他列的值,可以通过record.data["id"]的方式得到,这个属性很重要,我们经常会用到;
  4. rowIndex:行号,这里的行号指的是当前页中所有记录的顺序;
  5. columnIndex:当前列的列号;
  6. store:构造表格时传递的ds。表格里的所有数据都可以通过store获得。

3.自动显示行号和复选框都是renderer的延伸。先来说自动显示行号,在列模型columns中加入RowNumber对象即可,如下代码

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

4.获取选中行数据,有点奇怪不知道为什么,在EXTJS3.0和EXTJS4.0里面写法不一样,两者区别:

EXTJS4.0写法:
var selectedData = grid.getSelectionModel().getSelection()[].data;
alert(selectedData.Id);
EXTJS3.0写法:
var selectedData = grid.getSelectionModel().getSelection();
alert(selectedData[].Id);