PDA

View Full Version : Where's the hyperlink widget



BillHubbard
2 Dec 2011, 4:57 PM
How do I add a simple hyperlink to my app? Am I missing something?

skirtle
2 Dec 2011, 7:41 PM
Normally you'd just do it as HTML. How exactly you do that depends on exactly where you're trying to put it.

BillHubbard
5 Dec 2011, 3:53 PM
Since I'm working in JavaScript (a la ExtJS), I'm not working in HTML, so that doesn't make much sense. It seems there is a Button widget, but no corresponding Link widget, or flag in the Button widget to render it as a link instead of a button.

lorezyra
5 Dec 2011, 5:09 PM
You have to remember... ExtJS is a very advance HTML dom (object) creator... It creates the HTML that your browser displays! You can do inline HTML with any ExtJS component. Look for the html config on the component you want to layout in your app... I do this all the time...




Ext.define('mySimpleApp.view.ui.MyPanel5', {
extend: 'Ext.panel.Panel',

html: '//TODO: add basic network based tools here...<BR>e.g. ping, pingtrace, finger, telnet, traceroute, server info, client-side detection.<BR>Also add some DB tools here. The <A href="/TOS.html" class="terms">terms of service</A>.<br />',
id: 'toolsMainTAB',
itemId: 'toolsMainTAB',
styleHtmlContent: true,
autoScroll: true,
layout: {
type: 'fit'
},
title: 'Main',

initComponent: function() {
var me = this;

me.callParent(arguments);
}
});

skirtle
5 Dec 2011, 5:23 PM
When I say you should do it into HTML I don't mean you need to write an HTML page. I was referring to building HTML in JavaScript. This is a fundamental ExtJS technique, not a hack or workaround.

As I mentioned previously, there are many, many ways to do this in ExtJS and it depends on your circumstances as to the best one. To list but a few...


Using XTemplates, possibly via a tpl and data option.
Using the html config option for components that support it.
By setting the autoEl of an Ext.Component or similar.
By adjusting the markup for an existing component, usually via some sort of templating (e.g. comboboxes provide a getInnerTpl method).
By injecting markup after a component is rendered in something like an afterrender hook.
Using the provided renderer mechanism, for example in a grid column.


There have been various attempts at a 'Link Button' (do a search) but in most cases I think you'd be better off sticking to HTML techniques. Setting the href config option of a button will render it as an anchor tag but I think you'll find there's still a lot of effort involved to get it to do what you want.

BillHubbard
12 Dec 2011, 10:25 AM
This is what I wound up creating. Does everything I need and works great.



Ext.define('Sjs.lib.link.Link', {
extend: 'Ext.button.Button',
alias: 'widget.link',
initComponent: function() {
var me = this;
Ext.apply(me, {
baseCls: Ext.baseCSSPrefix+'link',
frame: false
});
Ext.applyIf(me, {
href: 'javascript:void(0)',
target: '_self'
});
me.callParent(arguments);
}
});


I can specify href in the config object to make it be just a straight hyperlink, or I can specify a handler to respond to the click event, with all the features of a button.