Question

我想在ExtJS的DataView行中显示一个（删除）按钮。我不希望删除按钮始终可见，只是鼠标悬停。

如果有人有一个非常感激的例子。

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完全如上所述。

在鼠标悬停（ExtJS）上的DataView行中显示按钮

2 个答案: