1、建立一个普通的grid表格(+日期格式的列)
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true}, ---- width(自主定义每一列的宽度) -- sortable:true 在列显示升降序排序
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'},
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日') }
//renderer:Ext.util.Format.dateRenderer extjs的日期格式化方法。我们直接用类就行了
]);
var data = [
['1','name1','descn1','2001-01-01'],
['2','name2','descn2','2001-01-02'],
['3','name3','descn3','2001-01-03'],
['4','name4','descn4','2001-01-04'],
['5','name5','descn5','2001-01-05'],
['6','name6','descn6','2001-01-06']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name},
{name:'descn'},
{name:'date',type:'date',dateFormat:'Y-m-d'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
// enableColumnMove:false,
// enableColumnResize:false,
// stripRows:true,
// loadMask:true,
viewConfig:{
forceFit:true
},
height:200
});
表格可以拖放列,也可以改变列的宽度。如果要禁用这个两个功能,在定义表格对象时将enableColumnMove和enableColumnResize设置为false即可。
stripRows:设置斑马线
loadMask:加载。。。
viewConfig 里的 forceFit设置为true : 自动填满表格,当然,你也可以自己设定每列的具体长度如:
{header:'编号',dataIndex:'id',width:45}, ---- width(自主定义每一列的宽度)
{header:'名称',dataIndex:'name',width:80},
{header:'描述',dataIndex:'descn',width:170}
2、比较复杂的grid(+css etc)
function renderSex(value){
if(value=='male'){
return "<span style='color:red;font-weight:bold'>红男</span><img src='images/male.png'/>";
}else{
return "<span style='color:green;font-weight:bold'>绿女</span><img src='images/female.png'/>";
}
}
function renderDesc (value,cellmeta,record,rowIndex,columnIndex,store){
var src = "<input type='button' value='查看详细信息' οnclick='alert(\"" +
"这个单元格的值是: "+value +"\\n" +
"这个单元格的配置 : {cellId:"+cellmeta.cellId+", id:"+cellmeta.id+",css:"+
cellmeta.css+"}\\n"+
"这个单元格对应行的recored是 : "+record+",一行的数据都在里面\\n"+
"这是第"+rowIndex+"行\\n"+
"这是第"+columnIndex+"列\\n"+
"这个表格对应的Ext.data.Store在这里:"+store+",随便用吧。"+
"\")'>";
return src;
}
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',sortable:true },
{header:'性别',dataIndex:'sex',renderer:renderSex},
{header:'名称',dataIndex:'name' },
{header:'描述',dataIndex:'descn',renderer:renderDesc },
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日') }
//renderer:Ext.util.Format.dateRenderer extjs的日期格式化方法。我们直接用类就行了
]);
var data = [
['1','male','name1','descn1','2001-01-01'],
['2','female','name2','descn2','2001-01-02'],
['3','male','name3','descn3','2001-01-03'],
['4','female','name4','descn4','2001-01-04'],
['5','male','name5','descn5','2001-01-05'],
['6','female','name6','descn6','2001-01-06']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'sex'},
{name:'name'},
{name:'descn'},
{name:'date',type:'date',dateFormat:'Y-m-d'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
// enableColumnMove:false,
// enableColumnResize:false,
// stripRows:true,
// loadMask:true,
// viewConfig:{
// forceFit:true
// },
height:500
});
注解:
我们可以在renderer里得到多个参数,如下所示。
value: 将要显示到单元格里的值
cellmeta:单元格的相关属性,主要有id和css
record:这个行的数据对象,如果要过的其他列的值,可以通过record.data["id"]的方式得到
3、为表格的行和列设置颜色
css样式:
<style type="text/css">
.red-row{background-color:#F5C0C0}
.yellow-row{background-color:#FBF8BF}
.green-row{background-color:#99CC99}
</style>
---------------------------------------------------------
viewConfig:{
forceFit:true,
enableRowBody:true,
getRowClass:function(record,rowIndex,p,ds){
if(rowIndex%2 == 0){
return 'yellow-row';
}else {
return 'green-row';
}
}
},
4、自动显示行号和复选框
1>
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), -- 自动显示表格的行号
{header:'编号',dataIndex:'id',sortable:true },
{header:'性别',dataIndex:'sex',renderer:renderSex},
{header:'名称',dataIndex:'name' },
{header:'描述',dataIndex:'descn',renderer:renderDesc },
{header:'日期',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日') }
//renderer:Ext.util.Format.dateRenderer extjs的日期格式化方法。我们直接用类就行了
]);
2> 删除某一行
Ext.get('remove').on('click',function(){ -- remove是个按钮
store.remove(store.getAt(1));
grid.view.refresh(); --刷新表格,查看删除后的记录
});
5、选择模型
在定义Ext.grid.GridPanel时,默认使用RowSelectionModel--行选择模型。行选择模型是默认支持多选的,鼠标单击时按住shift或是Ctrl键可以选择多行。如果只希望选择一行,需要设置singleSelect参数
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});
var grid = new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
viewConfig:{
forceFit:true,
enableRowBody:true,
height:500
});
“选择模型具体有什么作用?我还是不知道如何读取选中的行呀。”例如,当单击某一行时就会弹出一个对话框,并且显示显示当前行的一些信息
在上面的基础上在加上下面的代码
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.get("id")+", "+record.get("name")+", "+record.get("descn"));
}
});