开发者

Show button in DataView row on mouseover (ExtJS)

I would like to show a (delete) button in a DataView row in ExtJS. I don't want the delete button to be always visible but just on a mouseover.

If anyone has an example that 开发者_运维技巧would be greatly appreciated.


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>


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜