如何臨時突出顯示Ext JS網格面板（版本4.2.1）的可編輯列

Question

我正在使用ExtJS 4.2.1中的網格面板。我有一些列編輯器定義：'textfield'（可編輯的列），一些沒有編輯器（只讀列）。

我想要什麼？

我想臨時突出顯示帶有背景顏色的可編輯列，並將鼠標懸停在該特定列上。

我請求幫助。請指導。我已經白白耗費大量的時間在它和所有:(

問候， 賈普里特·辛格

任務 - 當鼠標放置在編輯的欄1和表2（具有編輯器配置選項），我想要的目標列將與一些色澤鮮豔的幾秒鐘暫時突出。

Ext.define('XX.view.account.Portfolios', { 
extend : 'Ext.grid.Panel', 
plugins : { 
    ptype : 'cellediting', 
    clicksToEdit : 1 
}, 
columns : [{ 
    text : 'Read Only 1', 
    flex : 1, 
    sortable : true, 
    dataIndex : 'ro1' 
}, { 
    text : 'Read Only 2', 
    flex : 2, 
    sortable : true, 
    dataIndex : 'ro2' 
}, { 
    text : 'MV', 
    flex : 1, 
    sortable : true, 
    dataIndex : 'mv' 
}, { 
    text : 'Editable 1', 
    flex : 1, 
    sortable : true, 
    dataIndex : 'e1', 
    editor : 'textfield' 
}, { 
    text : 'Editable 2', 
    flex : 1, 
    sortable : true, 
    dataIndex : 'e2', 
    editor : 'textfield' 
} 

Answer 1

正如洛倫茲建議你可以趕上itemmouseenter事件再突出編輯的行調用亮點方法，ORD呃只強調已編輯相關的，你大概可以使用適用於那些列一類，然後選擇鼠標上的匹配元素進入事件處理的細胞，這樣的事情：

itemmouseenter: function (grid, record, item, index, e, eOpts) { 
     var node = grid.getNode(record); 
     var cells = Ext.dom.Query.select('.editable-cell', node); 

     for (var i = 0; i < cells.length; i++) { 
      Ext.fly(cells[i]).highlight(); 
     } 
    } 

你可以看到一個working sample here 。 希望它可以幫助您解決問題

Answer 2

這裏的另一種選擇用CSS動畫：https://fiddle.sencha.com/#fiddle/16a