How to add a style to a particular column in EXTjs Editor Grid Panel which has column vars?

时间:2017-04-06 16:53:47

标签: javascript extjs

/* Need to have pointer cursor only on the particular column instead for whole grid or the row.

*/

this.testRenderer = function(v, m, r, ri, ci, ds) {
	var total = formatMoney(r.data["total"], cur);
	return total;
};

var columnsVar = [
	{
	header: getMsg('test', 'testp'),
	dataIndex: 'test.name',
	sortable: true
	},
	{
	header: getMsg('test', 'testtotal'),
	sortable: true,
	dataIndex: 'total',
	editor: new Ext.form.TextField({
	allowBlank: false,
	maxLength: 48
	}),
	render:this. testRenderer

	}, {
	header: getMsg('test', 'active'),
	sortable: true,
	dataIndex: 'test.Status'
	}
];


this.testGrid = new Ext.grid.EditorGridPanel({
	title:getMsg('test','Details'),
	flex: 3,
	cls: 'cnqr-shuttle-grid',
	border: false,
	header: true,
	clicksToEdit: 1,
	enableHdMenu: false,
	enableColumnHide: false,
	enableColumnMove: false,
	autoHeight: true,
	viewConfig: {
	    getRowClass : function(record, rowIndex, p, store) {
		    p.tstyle = ' cursor: pointer;'
	    },
	    forceFit: true,
	    scrollOffset: 0 // the grid will never have scrollbars
	},
	tbar: new Ext.Toolbar({
	    ctCls: 'grayButtonToolBar  border-toolbar'
	}),
	store: store1,
	selModel: new Ext.grid.RowSelectionModel(),
	columns: columnsVar

});

//testGrid is the Ext editor grid and column vars has 3 columns and I need have pointer cursor only on the 2nd column testtotal col. Have tried adding code at the testRenderer and did not work.

2 个答案:

答案 0 :(得分:1)

在想要指针的列上,添加以下内容:

renderer: function(value, metadata) {
    metadata.tdCls = 'pointer-only';
    return value;
}

在CSS中添加类:

.pointer-only {
    cursor: pointer;
}

这里有fiddle在简单网格的最后一列上说明了这一点

答案 1 :(得分:0)

renderer: function (value, metadata) {
	metadata.style = 'cursor: pointer;';
	return value;
}