Execute from text link?

[jaslgv]

Is there a way to replace this:

<input type="button" id="show-dialog-btn" value="Show Dialog" />

With a text link?

Sorry for such a green question.....

THANKS!

[ToNiC]

Not sure if this is the best way or it will work, but how about:

<a href="javascript:yourHandler();" onMouseOver="status='';return true">Show Dialog</a>

[jaslgv]

Hmm, I tried a couple different options and it isn't working. Let me give you all of the code...maybe that will help:

this button:

<input type="button" id="show-dialog-btn" value="Show Dialog" />

executes this code:

/*
* Ext JS Library 1.0.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/


// create the LayoutExample application (single instance)
var LayoutExample = function(){
// everything in this space is private and only accessible in the HelloWorld block

// define some private variables
var dialog, showBtn;

var toggleTheme = function(){
Ext.get(document.body, true).toggleClass('ytheme-gray');
};
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

},

showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.LayoutDialog("hello-dlg", {
modal:true,
width:600,
height:400,
shadow:true,
minWidth:300,
minHeight:300,
proxyDrag: true,
center: {
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: true
}
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog);
dialog.addButton('Close', dialog.hide, dialog);

var layout = dialog.getLayout();
layout.beginUpdate();
layout.add('center', new Ext.ContentPanel('center', {title: 'Messages from Dispatch'}));
// generate some other tabs
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Send a Message', background:true}));
layout.add('center', new Ext.ContentPanel(Ext.id(), {
autoCreate:true, title: 'Third Tab', closable:true, background:true}));
layout.endUpdate();
}
dialog.show(showBtn.dom);
}
};
}();

// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.EventManager.onDocumentReady(LayoutExample.init, LayoutExample, true);

[ToNiC]

Looking at your example,

I think this should work:
<a href="javascript:LayoutExample.showDialog();" onMouseOver="status='';return true">Show Dialog</a>

You need to remove:

showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);

and replace: dialog.show(showBtn.dom); with dialog.show();

[brian.moeskau]

To avoid inline javascript, you could do it this way:



Ext.get('show-dialog-btn').on('click', function(){
dialog.show('show-dialog-btn');
});

...

<a id="show-dialog-btn" href="#">Show Dialog</a>


One thing to note is that linking to # will avoid any navigation, but will still add a page onto the browser history, which is sometimes desirable. To avoid that, you can use the special JS function void(), which while it is still inline script, is usually preferable to adding "business logic" into your HTML:


<a id="show-dialog-btn" href="javascript:void(0);">Show Dialog</a>

[jaslgv]

works guys, thanks!!!

[dantheman]

...
<a id="show-dialog-btn" href="#">Show Dialog</a>
[/CODE]This will work for most people, but not if you are using a base href . . .
which I find myself working with more than I care to /:)

The javascript:void() hack is a keeper in that case.

--dan