PDA

View Full Version : How to use hyperlink using extjs



Enew
2 Sep 2010, 4:26 PM
Hi I want to use hyperlink in a line.
How do i give it using extjs.
How can i open a document when i click it.

for example: Please click <a>here</a>

Thanks:)

yerajeff
2 Sep 2010, 8:22 PM
How are you trying to use this hyperlink? If it is in an ExtJs component you can most likely specify an html paramter like so:



customHtmlPanel = new Ext.Panel({
bodyStyle: 'background-color:transparent; border:none;', //any custom css here or specified in cls
items: [{
autoWidth:true,
html: 'Hellow World',
xtype: "panel"
}]
});


Honestly though, without more explanation I'm not sure what you are trying to get at!

Animal
2 Sep 2010, 10:38 PM
"use a hyperlink" doesn't really help.

You want a toolbar button to be a hyperlink?

Enew
2 Sep 2010, 10:53 PM
No,I dont want as a toolbar button to be a hyperlink.
I want that in a form..

steffenk
2 Sep 2010, 11:30 PM
watch the click event, determine it was "a" clicked, stop the event and do what ever you want.

Animal
3 Sep 2010, 12:24 AM
Add a Component to the form:



{
xtype: 'box',
autoEl: {
tag: 'a',
href: 'http://foo.com',
html: 'Go to foo'
}
}


Or define a BoxComponent subclass which encapsulates that element, and adds any class-specific functionality you need.

Enew
9 Sep 2010, 4:08 PM
Hi,

I found the solution.
Use Ext.Button for the hyperlink.so that you can write listener for the hyperlink.
new Ext.Button({
html:'<a>link</a>here'
})

Condor
9 Sep 2010, 10:50 PM
Misusing a button for an anchor is not a solution.

You probably want something like:

{
xtype: 'box',
autoEl: {
tag: 'a',
href: '#',
cn: 'Click here'
},
listeners: {
render: function(c) {
c.on('click', function(e) {
alert('You clicked me!');
}, c, {stopEvent: true});
}
}
}

Enew
11 Sep 2010, 10:23 AM
Hi Condor,

You are right but i dont want the whole html to be hyperlink.
For eg.. cn: 'Click here'.I just want 'here' to be used as hyperlink so i didnot find a way other than using Ext.button..

Condor
11 Sep 2010, 11:30 AM
So you want:

autoEl: {
tag: 'span',
children: [{
tag: 'span',
cn: 'Click '
},{
tag: 'a',
href: '#',
cn: 'here'
}]
},

Animal
11 Sep 2010, 11:59 AM
Misusing a button for an anchor is not a solution.

Some blogger with blocked comments has posted a example of doing exactly this, so expect more...

Enew
16 Sep 2010, 12:50 PM
Hi,

I tried the above and created hyperlink as you said.But i am not able to call a function in the listener.
autoEl: {
tag: 'span',
children: [{
tag: 'span',
cn: 'Click '
},{
tag: 'a',
href: '#',
cn: 'here'
}],
listeners: {
'click': functionName,
scope: this
}
}

Enew
16 Sep 2010, 4:29 PM
Hi All,

I finally got the solution.But if you know any other way,please post it.

autoEl: {
cn:[{
tag:'span',
html:link
},
{
tag: 'a',
href: '#',
html: 'here',
onclick:"functionName()"
}]
}

Enew
17 Sep 2010, 12:23 PM
Any ideas??

Animal
17 Sep 2010, 12:24 PM
For what exactly?

Enew
20 Sep 2010, 1:25 PM
I am mainly looking to add listeners to the hyperlink..

Animal
20 Sep 2010, 9:33 PM
For what?

You might need a DataView with a click listener attached.

Enew
21 Sep 2010, 4:22 PM
I want to open a file when this hyperlink is clicked.