PDA

View Full Version : How to derive a dialogbox from an anchor tag



kkven
16 Aug 2007, 11:01 PM
Is there any way to load a dialogbox from an anchor w/ animation? Here is the code i have.
It works perfectly fine w/ a button however it does not work w/ the anchor(<a></a>) as it is not an Ext button object.
any help would be greatly appreciated.

Thanks a lot in advance,

Kkven


var DlgShow = function(btn, e) {
if(!this.dlg) {

// create the BasicDialog
this.dlg = new Ext.BasicDialog('dialog', {
width: 220
, height: 220
, modal: true
, shadow: true
, proxyDrag: true
});
}
if(this.dlg.isVisible()) {
this.dlg.hide(btn.el);
}
else {
this.dlg.show(btn.el);
}
};
showBtn = Ext.fly('loginIn');
showBtn.on('click', DlgShow, this);

mystix
16 Aug 2007, 11:15 PM
it doesn't have to be an Ext.Button. it works with any clickable element in the DOM.
(check out the docs for Ext.BasicDialog's show() method)

in your case, your function should be rewritten as
(note i've simplified your code 'cos it seems you're still struggling with event handling)


var DlgShow = function(id) {
if (!this.dlg) {
...
...
...
}
if (this.dlg.isVisible()) {
this.dlg.hide(); // hide accepts 1 argument, which should be a callback function
} else {
this.dlg.show(id); // animate from the DOM element with the specified id
}
};

var showEl = Ext.get('myAnchor'); // get the DOM element you want (the anchor with id='myAnchor' in your case)
showEl.on('click', function(e) { // assign a handler to the anchor's click event
e.stopEvent(); // prevent the anchor's default behaviour (i'd advise you to stuff a javascript:void(0); into the anchor's href also)
DlgShow('myAnchor');
});

kkven
16 Aug 2007, 11:35 PM
Thanks a lot for your quick response. That was really helpful and also quick.

Thanks again,

Kkven