2

我想要么在 Extjs 中创建一个链接，要么让一个按钮看起来像一个链接，然后在悬停时你会看到这个按钮。他们在文档中使用代码编辑器按钮和实时预览按钮执行此操作。

在此处输入图像描述

如果他们使用 CSS 执行此操作，我使用什么 CSS 以及何时/如何应用它？

4

3 回答 3

1

使用 Ext 4.0.7，我设法做到了以下几点：

View:
...
{
   xtype: 'button'
   ,text: 'Discard changes'
   ,action: 'cancel'
   ,cls: 'secondary-action-btn'
}

CSS:
....
.secondary-action-btn {
    border: none;
    background: none;
}
.secondary-action-btn span {
    cursor: pointer;
    text-decoration: underline;
}
于 2014-12-09T15:29:01.660 回答
1

我最近想要一个 LinkBut​​ton 组件。我试图在没有任何运气的情况下找到一个预先存在的组件，所以我最终从头开始编写了一个。它的实现几乎完全基于 CSS。

/******************************************************************************/
/*** LINK BUTTON CSS **********************************************************/
/******************************************************************************/
a.ux-linkbutton {
    background-image: none;
    border: 0px none;
    margin-top: 1px;
}

a.ux-linkbutton.x-btn-default-small-focus {
    background-color: inherit;
}

a.ux-linkbutton * {
    font-size: inherit !important;
}

a.ux-linkbutton:hover {
    text-decoration: underline;
    background-color: inherit;
}

/******************************************************************************/
/*** LINK BUTTON JS ***********************************************************/
/******************************************************************************/
Ext.define( "Ext.ux.button.LinkButton", {
    extend: "Ext.button.Button",
    alias: "widget.linkbutton",

    cls: "ux-linkbutton",

    initComponent: function() {
        this.callParent();
        this.on( "click", this.uxClick, this, { priority: 999 } );
    },

    // This function is going to be used to customize 
    // the behaviour of the button and click event especially as it relates to 
    // its behaviour as a link and as a button and how these aspects of its 
    // functionality can potentially conflict.
    uxClick: function() {
        //Ext.EventObject.preventDefault();
        //Ext.EventObject.stopEvent();
        //Ext.EventObject.stopPropagation();
        //return false;
    }
} );

点击处理程序是一个正在进行中的工作。

该类确实有一个小问题：单击/聚焦后应用了我无法删除的伪类样式。如果有人在我之前修复它，请发布它的 CSS。

于 2014-11-17T04:17:12.117 回答
0

我记得有一个名为 linkBut​​ton 的扩展。你可以参考这里的extjs论坛

于 2012-09-18T08:44:22.473 回答