如何使 Extjs Button 看起来像一个链接？答案

【问题标题】：How to make Extjs Button look a link?如何使 Extjs Button 看起来像一个链接？
【发布时间】：2012-09-17 17:36:50
【问题描述】：

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

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

【问题讨论】：

应用哪种 CSS 取决于所使用的 HTML。请显示 HTML，也许有人可以提供帮助。
我不确定你的意思。我只想要一个按钮，就像它在 Sencha 文档中一样。 docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button。在整个文档中，它们都有代码编辑器和 Live Privew 按钮，除非您将鼠标悬停在它们上面，否则它们看起来并不像按钮。
使用浏览器调试器，右键单击元素，检查 CSS。都在那里。
我知道怎么抓取css。这不是我要问的。

【解决方案1】：

我最近想要一个 LinkButton 组件。我试图在没有任何运气的情况下找到一个预先存在的组件，所以我最终从头开始编写了一个。它的实现几乎完全基于 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。

【讨论】：

【解决方案2】：

使用 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;
}

【讨论】：

【解决方案3】：

我记得有一个名为 linkButton 的扩展。可以参考extjs论坛here

【讨论】：

它不适用于 extjs 4。或者至少是我找到的那些。