How to make Extjs Button look a link?

2
votes

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?

3
extjsextjs4.1
Which CSS is applied depends on the HTML being used. Please show the HTML and maybe someone can help. - Diodeus - James MacFarlane
I'm not sure what you mean. I just want a button to function like it does in the Sencha documents. docs.sencha.com/ext-js/4-1/#!/api/Ext.button.Button. Through out the documents they have Code Editor and Live Privew buttons that don't look like a button until you hover over them. - Jerinaw
Use a browser debugger, right click on the element, inspect the CSS. It's all there. - Diodeus - James MacFarlane
I know how to grab css. That's not what I'm asking. - Jerinaw

3 Answers

1
votes

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.

1
votes

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

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