PDA

View Full Version : CSS to make custom component look like a toolbar button



meehigh
25 Aug 2010, 3:15 AM
Hello, I have a viewport and in the west region a custom component (extending Ext.Panel). This component is filled dinamically with other panels which in turn are filled with custom components that resemble hyperlinks. The hyperlink custom component fires a click event, which is then bubbled up to its container. Everything works fine, except that the click event is fired even when the user clicks outside the text area of the hyperlink component. My idea is to make the hyperlink component look like a toolbar button which fills all the horizontal space it has available. But I don't know what css to use. My code for the custom hyperlink is below. Please help. Thank you.



Ext.ns('eTax');

eTax.Link = Ext.extend(Ext.Component, {
text: null,
icon: null,

initComponent: function(){
config = {}
Ext.apply(this, Ext.apply(this.initialConfig, config));
eTax.Link.superclass.initComponent.apply(this, arguments);
this.addEvents('click');
},

onRender: function(ct){
this.el = ct.createChild({
cls: 'etax-link',
children: [{
tag: 'a',
href: '#',
html: this.initialConfig.text,
style: 'padding: 5 5 5 22; background: transparent url(' + this.initialConfig.icon + ') no-repeat center left;'
}]
});

eTax.Link.superclass.onRender.apply(this, arguments);
this.enableBubble('click');
this.getEl().on('click',function(){this.fireEvent('click',this.text);},this);
}
});

Ext.reg('etaxlink', eTax.Link);
And for the css class:



.etax-link{
margin:7px 7px 7px 7px;
}

.etax-link a{
text-decoration:none;
color:#3764A0;
}

.etax-link a:hover{
text-decoration:underline;
color:#15428b;
}

Animal
25 Aug 2010, 3:36 AM
Use a LinkButton

Animal
25 Aug 2010, 3:40 AM
Actually, you don't need a LinkButton because you aren't using an <a> properly.

Why don't you just use an Ext.Button?