How to make hyper-links clickable in EXTJS htmleditor

Question

I came across this problem and was struggling to make it work. Finally found a solution so thought of posting it here so that someday this would be useful to someone.

I had two issues:

FIRST

In EXTJS accordion panel, I had HTMLEDITOR in all the panels. Whenever there was a expand/collapse of other panels, the entered data in the editor used to vanish (editor loosing content) even if the data was coming from a file and was store in a variable

SECOND

In the HTMLEDITOR if the content contained a hyperlink, then the editor was not allowing to click and even CTRL+CLICK was not working. The marked content was however shown as a hyperlink

Thanks VikasDK

Answer 1

I didnt understand one thing. How come the code that I had put in my question got removed. I had posted the below code in my earlier post and now its not there.

FIRST

Listen to the expand event of the panel and put the following code to reset the value;

expand: function () 
{
var htmlEditor = Ext.getCmp(nodeId + '_desc_html_editor');
htmlEditor.setReadOnly(false);
htmlEditor.setValue(desc_html);//desc_html contains the value fetched from the file
}

SECOND

Make the hyperlink read-only by using the following css and then if calling a javascript function use the "parent.";

<a href='javascript:void(0);' style='-webkit-user-modify: read-only; -moz-user-modify: read-only;' onclick='parent.functionName(\"parameter\")'>Click for Details</a>

Answer 2

FIRST

Listen to the expand event of the panel and put the following code to reset the value;

expand: function () 
{
var htmlEditor = Ext.getCmp(nodeId + '_desc_html_editor');
htmlEditor.setReadOnly(false);
htmlEditor.setValue(desc_html);//desc_html contains the value fetched from the file
}

SECOND

Make the hyperlink read-only by using the following css and then if calling a javascript function use the "parent.";

<a href='javascript:void(0);' style='-webkit-user-modify: read-only; -moz-user-modify: read-only;' onclick='parent.functionName(\"parameter\")'>Click for Details</a>

THIRD

Use an autoEl

{
    xtype: 'component',
    autoEl: {
        tag: 'a',
        href: 'http://www.example.com/',
        html: 'Example.com'
    }
}