Показать кнопку в строке DataView при наведении курсора мыши (ExtJS) - PullRequest
Новая
       35

Показать кнопку в строке DataView при наведении курсора мыши (ExtJS)

0 голосов
/ 15 марта 2011

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

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

Ответы [ 2 ]

3 голосов
/ 15 марта 2011

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

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

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>
1 голос
/ 22 сентября 2011

Точно так же, если вы хотите иметь те же функциональные возможности в 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 в точности соответствует указанномувыше.

...