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

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

---

如果有人能举个例子，我们将不胜感激。

作为旁注，DataView不一定有“行”。它有你想要的任何东西，这取决于给它的XTemplate

话虽如此，您可以将

overCls

config选项添加到DataView中，当鼠标悬停在该类上时，该类将被添加到该视图的项目中。然后，只需使用CSS根据overCls的存在来显示或隐藏delete按钮

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',
    ...
})

new Ext.DataView({
第三方物流：''+
'' +
“X”+
//…正常内容
'' +
'',
overCls:“我的包装器悬停”，
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>

.my wrapper.my close按钮{display:none；}
.my wrapper hover.my close按钮{display:block！important；}

作为旁注，数据视图不一定有“行”。它有你想要的任何东西，这取决于给它的XTemplate

话虽如此，您可以将

overCls

config选项添加到DataView中，当鼠标悬停在该类上时，该类将被添加到该视图的项目中。然后，只需使用CSS根据overCls的存在来显示或隐藏delete按钮

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',
    ...
})

new Ext.DataView({
第三方物流：''+
'' +
“X”+
//…正常内容
'' +
'',
overCls:“我的包装器悬停”，
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>

.my wrapper.my close按钮{display:none；}
.my wrapper hover.my close按钮{display:block！important；}

类似地，如果您希望在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与上述内容完全相同。

类似地，如果您希望在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与上面指定的完全相同。

在使用dataview显示列表时，其作用类似于一个小的添加：对于列表条目特定的样式，使用超类而不是超类。在使用dataview显示列表时，其作用类似于一个小的添加：对于列表条目特定的样式，使用超类而不是超类。