普普通通表格范例
普通表格范例
主要演示以下功能:
包含复选框列、行号列
自定义单元格的渲染
定制表格视图
各种选择模式:单元格、行、复选框
范例源码:
var datas = [[1,"张三",24,"Y",new Date(1986,06,09)], [2,"李四",30,"N",new Date(1980,09,13)], [3,"王五",28,"Y",new Date(1982,01,10)]]; var person = Ext.data.Record.create([ {name: "personId", mapping: 0}, {name: "personName", mapping: 1}, {name: "personAge", mapping: 2}, {name: "personGender", mapping: 3}, {name: "personBirth", mapping: 4} ]); //复选框选择模式 var checkboxSM = new Ext.grid.CheckboxSelectionModel({ checkOnly: true, singleSelect: false }); var grid = new Ext.grid.GridPanel({ id: "grid1", title: "GridPanel实例", renderTo: "div1", width: 500, height: 300, //frame: true, tbar: [ { text: "取得所选单元格", iconCls: "search", handler: function(){ /* //单元格选择模式:new Ext.grid.CellSelectionModel() var cell = grid.getSelectionModel().getSelectedCell(); if(cell!=null) alert(cell[1]); */ /* //行选择模式:new Ext.grid.RowSelectionModel() var msg = ""; grid.getSelectionModel().each(function(record){ msg += record.get("personName") + "\n"; }); if(msg!="") alert(msg); */ } } ], store: new Ext.data.Store({ reader: new Ext.data.ArrayReader({id:0}, person), data: datas }), columns: [ checkboxSM, new Ext.grid.RowNumberer({header:"<font color=red>行号</font>", width:35}), {id:"personId", header:"编号", width:50, dataIndex:"personId"}, {id:"personName", header:"姓名", width:70, dataIndex:"personName"}, {id:"personAge", header:"年龄", width:45, dataIndex:"personAge", renderer:formatAge}, {id:"personGender", header:"性别", width:45, dataIndex:"personGender", renderer:formatGender}, {id:"personBirth", header:"出生日期", width:120, dataIndex:"personBirth", renderer:Ext.util.Format.dateRenderer("Y年m月d日")} ], //autoExpandColumn: "personBirth", stripeRows: true, //sm: new Ext.grid.CellSelectionModel() //sm: new Ext.grid.RowSelectionModel() sm: checkboxSM, viewConfig: { //表格视图配置对象 enableRowBody: true, sortAscText: "升序", sortDescText: "降序", columnsText: "列表字段", getRowClass: function(record, index, rowParams, store){ rowParams.body = "<div style='padding:2px;'>" + record.get("personName") + "</div>"; rowParams.bodyStyle = "height:30;background-color:#FFFFCC;"; } } }); //自定义单元格渲染函数 function formatAge(value, metadata){ if(value>=30){ metadata.attr = 'style="background-color:#CCFFFF"'; } return value; } function formatGender(value){ return value=="Y" ? "男" : "<font color=red>女</font>"; }