PDA

View Full Version : Ext.ux.Hyperlink



AndreaCammarata
10 Jan 2010, 3:44 AM
I created a cutom ux component for this purpose some months ago because i wanted use it in my Aral Desktop (http://www.extjs.com/forum/showthread.php?t=88691) project.
You will be also able to set an icon just on the left of the label.
Heres' the code of my Hyperlink object


Ext.namespace('Ext.ux');

Ext.ux.Hyperlink = Ext.extend(Ext.form.Label, {

iconCls: '',

initComponent : function(){
this.addEvents(
'click'
);

this.template = '<div id="{0}-wrap" class="x-hyperlink">' +
'<div id="{0}-icon" class="x-hyperlink-icon {1}"></div>' +
'<div id="{0}-text" class="x-hyperlink-text">{2}</div>' +
'</div>';

Ext.ux.Hyperlink.superclass.initComponent.call(this);
},

onRender: function(ct, position){

Ext.ux.Hyperlink.superclass.onRender.call(this, ct, position);

this.mon(this.el, {
scope: this,
click: this.click
});
this.doLayout();
},

click: function(e){
this.fireEvent('click', this);
},

setText: function(text){
this.text = text;
this.doLayout();
},

setIconCls: function(iconCls){
this.iconCls = iconCls;
this.doLayout();
},

doLayout: function(){
var html = String.format(this.template, this.el.id, this.iconCls, this.text);
Ext.fly(this.el.id).dom.innerHTML = html;
}
});
Ext.reg('hyperlink', Ext.ux.Hyperlink); and this is the custom css


.x-hyperlink { color: #0066cc; font-family: Verdana, Arial; font-size: 11px; cursor: pointer;}
.x-hyperlink:hover { text-decoration: underline; color: #3399ff; }
.x-hyperlink-icon { float: left; width: 16px; height: 16px; }
.x-hyperlink-text { float: left; padding-top: 1px; margin-left: 5px; } You can see an example of the object in the attached screenshot.

erosszz
11 Jan 2010, 6:52 PM
could you give some usage of your great ux...

erosszz
11 Jan 2010, 7:44 PM
i tried your ux but came up with different result

1) 2nd link was inline continuously with 1st link (it should be at the second line)
*seems to be ok when i add the <br/><br/> in the this.template

2) underline is not effective when mouse hover


i copy and paste your css and js file then code the below:

items code:


{
id: "gmap",
text: 'Google Map API',
xtype: 'hyperlink',
iconCls: 'gmap',
listeners: listenerGisHyperlink_Click

}
,
//{xtype: 'spacer', height: 20} //<- it seems to be the same with your attached sample, did you use this spacer?
//,
{
id: "gis-mapapi-gismap",
text: 'GIS Map',
xtype: 'hyperlink',
iconCls: 'gismap',
listeners: listenerGisHyperlink_Click
}
icons:
gmap.png - 16x16
gismap.png - 16x16

css:


.gmap {
background-image:url(../images/gmap.png) !important
}
.gismap {
background-image:url(../images/gismap.png) !important
}

erosszz
11 Jan 2010, 7:48 PM
for sure there is better approach... or correct usage of this ux...
kindly add it up here also...
thanks

sanjshah
12 Jan 2010, 8:12 AM
Andrea,

Could you please provide a quick example.

Thanks

AndreaCammarata
12 Jan 2010, 9:14 AM
Hi guys!
Here I come with a simple example



Ext.onReady(function() {
var panel = new Ext.Panel({
title: 'Hyperlinks Panel',
layout: 'absolute',
height: 100,
renderTo: document.body,
items: [{
xtype: 'hyperlink',
text: 'Edit user profile',
iconCls: 'editUser',
x: 10,
y: 20,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Edit hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Delete from Network',
iconCls: 'deleteUser',
x: 10,
y: 40,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Delete hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Disable',
iconCls: 'disableUser',
x: 10,
y: 60,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Disable hyperlink');
}
}
}]
})
});


It seems to be a problem eith the text underlying on mouse hover. I check it out.

AndreaCammarata
12 Jan 2010, 9:17 AM
Hi guys.
I post a simple example of the ux.Hyperlink.


Ext.onReady(function() {
var panel = new Ext.Panel({
title: 'Hyperlinks Panel',
layout: 'absolute',
height: 100,
renderTo: document.body,
items: [{
xtype: 'hyperlink',
text: 'Edit user profile',
iconCls: 'editUser',
x: 10,
y: 20,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Edit hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Delete from Network',
iconCls: 'deleteUser',
x: 10,
y: 40,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Delete hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Disable',
iconCls: 'disableUser',
x: 10,
y: 60,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Disable hyperlink');
}
}
}]
})
});

However, it seems there's a problem on the label underlying on mouse hover. I check it out!

AndreaCammarata
12 Jan 2010, 10:16 AM
Hi guys!
I post a quick example.


var panel = new Ext.Panel({
title: 'Hyperlinks Panel',
layout: 'absolute',
height: 100,
renderTo: document.body,
items: [{
xtype: 'hyperlink',
text: 'Edit user profile',
iconCls: 'editUser',
x: 10,
y: 20,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Edit hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Delete from Network',
iconCls: 'deleteUser',
x: 10,
y: 40,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Delete hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Disable',
iconCls: 'disableUser',
x: 10,
y: 60,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Disable hyperlink');
}
}
}]
});It seems there is a underling bug when mouse move hover it. I'm going to check it out.

AndreaCammarata
12 Jan 2010, 11:35 AM
test

AndreaCammarata
12 Jan 2010, 3:13 PM
Hi guys i post you a quick example:


var panel = new Ext.Panel({
title: 'Hyperlinks Panel',
layout: 'absolute',
height: 100,
renderTo: document.body,
items: [{
xtype: 'hyperlink',
text: 'Edit user profile',
iconCls: 'editUser',
x: 10,
y: 20,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Edit hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Delete from Network',
iconCls: 'deleteUser',
x: 10,
y: 40,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Delete hyperlink');
}
}
},{
xtype: 'hyperlink',
text: 'Disable',
iconCls: 'disableUser',
x: 10,
y: 60,
listeners: {
'click': function(){
Ext.Msg.alert('User Manager', 'You clicked on Disable hyperlink');
}
}
}]
});

However it seems there is a bug on label underlying when mouse hover. I check it out!
PS: sorry if I reply too late but there was a problem with the forum and i wasn't able to reply before.

erosszz
12 Jan 2010, 4:29 PM
ohh i see, you use absolute layout...
thanks...

regarding with the mouse hover, highly appreciated Sir..... it helps the community...
thanks again..

wemerson.januario
12 Jan 2010, 6:04 PM
nice

AndreaCammarata
13 Jan 2010, 6:01 AM
ohh i see, you use absolute layout...
thanks...

Try to tell me the use that you want do for better understand your needs and I could make some improvements on the component.

erosszz
13 Jan 2010, 4:13 PM
using absolute layout is one of the options...

if im not mistaken, like with the fieldlabel of form layout...
that all fieldlabels are arrange downward by default...

but please allow us to set some configOption that will looks like with the Ext JS site menu bar layout (this maybe obtain using absolute layout)...

please correct me if i overlooked because i'm still ignorant with the framework... still in learning process... ;)