Показать кнопку в строке DataView on mouseover (ExtJS)

Question

Я хотел бы показать кнопку (удалить) в строке DataView в ExtJS. Я не хочу, чтобы кнопка удаления всегда была видна, но только на мыши.

Если у кого-нибудь есть пример, который был бы весьма признателен.

Answer 1

В качестве примечания стороны DataView не обязательно имеет «строки». Он имеет то, что вы хотите, в зависимости от XTemplate, предоставленного ему.

Сказав это, вы можете добавить опцию конфигурации overCls в свой DataView, и этот класс будет добавлен к элементам представления, когда мышка нависает над ним. Тогда просто нужно использовать CSS, чтобы показать или скрыть кнопку удаления, основанную на существовании overCls.

new Ext.DataView({ 
    tpl: '<tpl for=".">' + 
      '<div class="my-wrapper">' + 
       '<div class="my-close-button">X</div>' + 
       // ... normal content 
      '</div>' + 
     '</tpl>', 
    overCls: 'my-wrapper-hover', 
    itemSelector: 'div.my-wrapper', 
    ... 
}) 

Тогда в CSS:

<style type="text/css"> 
    .my-wrapper .my-close-button { display: none; } 
    .my-wrapper-hover .my-close-button { display: block !important; } 
</style> 

Answer 2

Точно так же, если вы хотите иметь такую ​​же функциональность в GridPanel (v3.3 испытано), это может быть достигнуто с небольшим изменением по выше.

var grid = new Ext.grid.GridPanel({ 
     //grid config... 
     columns: [{ 
      header : 'Actions', 
      xtype : 'actioncolumn', 
       items : [{ 
       icon : '../images/delete16.gif', 
       iconCls: 'my-close-button', 

       //..the rest of your config... 
    }); 

grid.getView().rowOverCls="my-wrapper-hover"; 

css точно такой же, как указано выше.