PDA

View Full Version : how to create a hyperlink button



valfumble
28 Dec 2010, 9:45 AM
can one create a button with hyperlink?

sideeque
28 Dec 2010, 12:35 PM
Create a panel with HTML link like below...


var clickableLink = new Ext.Panel({
html: '<a href = "javascript: void(0)" onClick = "window.open(\'http://www.google.com\');">Google</a>',
style: 'padding-top:5px;text-align:center;font-style:italic;color: gray;font-size:11px;'

});

then add to your Container.

Condor
28 Dec 2010, 12:48 PM
Using a panel for a simple link is a lot over unneeded overhead.

A simple BoxComponent is much lighter:

{
xtype: 'box',
autoEl: {
tag: 'a',
href: '...',
cn: 'Click me'
}
}
or, if you want a link that looks like a button, use Animal's LinkButton user extension.

valfumble
6 Jan 2011, 1:24 PM
great..that worked perfectly thanks

valfumble
18 Jan 2011, 10:56 AM
Is it possible to easily hook up extjs functions with on click event in buttons that look like links?

Condor
18 Jan 2011, 11:36 PM
{
xtype: 'box',
autoEl: {
tag: 'a',
href: '#',
cn: 'Click me'
},
listeners: {
render: function(c) {
c.getEl().on({
click: function(e, t) {
e.stopEvent();
// do stuff
},
scope: c
});
}
}
}

valfumble
19 Jan 2011, 10:26 AM
great, that worked perfectly, Thanks

SOAArchitect
16 Feb 2011, 3:16 PM
Candor

I tried your code and have a minor problem. Here is my code snip using ext-3.3.0 which I utilized from your post on this thread. I'm a first time user of ExtJS.

Firefox Console Error:
l.fireFn is undefined
if(l && l.fireFn.apply... me.obj || window, args) === FALSE) {


var CIRF_Button_Link = new Ext.FormPanel({
renderTo: document.body,
border: true,
width: 250,
items:
[{
xtype: 'box',
autoEl:
{
tag: 'a',
href: '#',
cn: 'CIRF Button Link'
},
listeners: {
render: function(c) {
c.getEl().on({
click: function(e, t) {
e.stopEvent();
// do stuff
},
scope: c
})
}
}
}]
});

Ext.EventManager.onDocumentReady(CIRF_Button_Link.init, CIRF_Button_Link, true);

Condor
17 Feb 2011, 1:20 AM
CIRF_Button_Link.init

Your CIRF_Button_Link form doesn't have an 'init' method.

1. Remove the renderTo from the config.
2. Use:

Ext.onReady(function(){
CIRF_Button_Link.render(Ext.getBody());
});