CODEWITHSUNDEEP
extjsextjs4.1
Jerinaw
Jerinaw

Reputation: 5529

How to make Extjs Button look a link?

I want to either make a link in Extjs or make a button look like a link and on hover you see the button. They do this in the docs with Code Editor button and the Live Preview button.

enter image description here

If they do this using CSS, what CSS do I use and when/how to I apply it?

Upvotes: 2

Views: 6445

Answers (3)

t3az0r
t3az0r

Reputation: 459

With Ext 4.0.7 I had managed to do the following:

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

Upvotes: 1

chris.middleton
chris.middleton

Reputation: 31

I recently wanted a LinkButton component. I tried to find a pre-existing component without any luck, so I ended up writing one from scratch. Its implementation is almost entirely CSS-based.

/******************************************************************************/
/*** 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;
    }
} );

The click handler is a work-in-progress.

The class does have one minor issue: a pseudo-class style is applied after clicking/focusing that I have not been able to remove. If someone fixes it before I do, please, post the CSS for it.

Upvotes: 1

Davis Lay
Davis Lay

Reputation: 11

I recall there is an extension called linkButton. You can refer to the extjs forum here

Upvotes: 0

Related Questions