EXTjs Editorの特定の列にスタイルを追加するにはどうすればいいですか？

Question

/* グリッド全体または行の代わりに、特定の列にのみポインタカーソルを置く必要があります。

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

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

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

 

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

 
});

*/

// testGridがextエディタグリッドで、列は3列がありvarsのと私はCOL testtotalのみ2列目の上にポインタカーソルを持っている必要があります。 testRendererでコードを追加しようとしましたが動作しませんでした。あなたは上のポインタをしたい列に

Answer 1

、次の行を追加します。

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

そして、あなたのCSSでクラスを追加します。

.pointer-only { 
    cursor: pointer; 
} 

ここで、Aの最後の列でこれを示すfiddleです単純なグリッド

Answer 2

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