当前位置：文江博客话题详情

鼠标悬停时在 DataView 行中显示按钮 (ExtJS)

发布于 2024-10-22 01:54:45 字数 91 浏览 1 评论 0原文

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

如果有人有一个例子，将不胜感激。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不会写诗 2024-10-29 01:54:45

附带说明一下，DataView 不一定有“行”。它具有您想要的任何内容，具体取决于为其提供的 XTemplate。

话虽如此，您可以将 overCls 配置选项添加到 DataView 中，当鼠标悬停在该类上时，该类将被添加到视图的项目中。然后，只需使用 CSS 根据 overCl 的存在来显示或隐藏删除按钮即可。

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>

As a side note, a DataView doesn't necessarily have "rows". It has whatever you want it to have, depending on the XTemplate given to it.

Having said that, you can add the overCls config option to your DataView, and that class will be added to the view's items when the mouse hovers over it. Then it's just a matter of using CSS to show or hide the delete button based on the existence of the 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',
    ...
})

Then in CSS:

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

回复收藏 0 原文

神妖 2024-10-29 01:54:45

同样，如果您想在 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 与上面指定的完全相同。

Similarly, if you want to have the same functionality in a GridPanel (v3.3 tested), it can be achieved with a slight variation on the above.

    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";

The css is exactly as specified above.

回复收藏 0 原文

~没有更多了~