var fn = function(value, cellmeta, record, rowIndex, columnIndex, store){ var str=\查看详细信息' onclick='alert(\\\ +\这个单元格的值是: \ +\这个单元格的配置是: {cellId\+ cellmeta.cellId + \+ cellmeta.id + \+ cellmeta.css + \ +\这个单元格对应行的record是:\一行的数据都在里面\\\\n\ +\这是第\行\\\\n\ +\这是第\列\\\\n\ +\这个表格对应的Ext.data.Store在这里:\随便用吧。\ return str; }
3、Grid上的触发事件
//下面是一个cellclick事件
grid.addListener('cellclick', cellclickFn);
function cellclickFn(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex); //Get the Record var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name var data = record.get(fieldName); Ext.MessageBox.alert('show','当前选中的数据是'+data); }
4、在表格中添加CheckBox
var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), //自动行号 sm, //添加的地方 {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]);
var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, //添加的地方 title: 'HelloWorld' });
5、设置表格的颜色或字体
5.1在单元格中显示红色的字、图片和按钮
var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer(), sm, {header:'编号',dataIndex:'id'}, {header:'性别',dataIndex:'sex',renderer:changeSex}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]);
cm.defaultSortable = true;
function changeSex(value){ if (value == 'male') { return \红男\ }else { return \绿女\ } }
5.2设置行的颜色 viewConfig:{ forceFit:true, enableRowBody:true, getRowClass:function(record,rowIndex,p,ds){ var cls = 'white-row'; if (record.data.id % 2 == 0){ cls='red-row'； }else{ cls='yellow-row'； } return cls; } }
****如果你配置了view: new Ext.grid.GroupingView({ 这样的话 viewConfig:{里添加 此函数就不起作用了,要把函数放到view: new Ext.grid.GroupingView({里. 例如: items: [{
title: '收款信息', layout: 'form', defaults: {
width: 230 },
defaultType: 'textfield', xtype: \
id: 'vssk', border: false, viewConfig: { forceFit: true }, ds:girdStoreA,
view: new Ext.grid.GroupingView({ forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[\条 共\元)', getRowClass : function(record,rowIndex,rowParams,store){ //禁用数据显示红色 if(record.data.pstate!=0){ return 'x-grid-record-red'; }else{ return ''; } }]
5.3修改列的颜色
使用renderer属性配置如下方法
var fn=function(value, cellmeta, record, rowIndex, columnIndex, store){ var value = record.get('color'); cell.attr = \ return data; }
****当然，如果只想修改Grid某一行的样式，还可以用grid.getView().addRowClass(r,css)； 修改Grid某一单元格的样式，可以用Ext.get(grid.getView().getCell(r,c)).addClass(css) 或grid.getVies().getRow(r).style.backgroundColor = \。
6、后台排序
Grid的后台排序只需在配置Ext.data.Store的时候配置remoteSort:true即可， 这样下次排序的时候，Store会向后台提交两个参数：sort和dir。 sort表示需要排序的字段，dir表示升序或降序(ASC/DESC)。
Gird支持中文排序需要重写Ext.data.Store的applySort函数： Ext.data.Store.prototype.applySort=function() { if (this.sortInfo && !this.remoteSort) { var s = this.sortInfo, f = s.field;
var st = this.fields.get(f).sortType; var fn = function(r1,r2){ var v1 = st(r1.data[f]), v2=st(r2.data[f]); if (typeof(v1) == \ return v1.localeCompare(v2); } return v1 > v2 ? 1: (v1 < v2 ? -1 : 0) }; this.data.sort(s.direction,fn); if (this.snapshot && this.snapshot != this.data) { this.snapshot.sort(s.direction, fn); } } };
7、在Grid的上方添加按钮
//添加按钮的关键之处在于tbar或bbar属性设置Toolbar工具条 var grid = new Ext.grid.GridPanel({ el: 'grid3', ds: ds, cm: cm, sm: sm, title: 'HelloWorld', tbar: new Ext.Toolbar({ items:[ {id:'buttonA', text:\ handler: function(){ alert(\ }, new Ext.Toolbar.SplitButton({}), {id:'buttonB', text:\ handler: function(){ alert(\ }, '-', {id:'buttonc', text:\ } ] }) });
8、Grid中做出快捷菜单效果
