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

Question

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

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

Answer 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。

Answer 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;
}

Answer 3

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