Adding anchor elements as Toolbar buttons

[Animal]

Jack, could we come up with a way of allowing "<a>" elements to be added as Toolbar Buttons?

Right now, if you specify HTML in the "text" property it doesn't work. It still creates <button>{yourText}</button>.

And it adds a click handler. the following code worked and was fun to figure out - I love the Element.child() function! No more accident prone el.firstChild.firstChild.childNodes[1].firstChild!



var b = this.gridToolbar.addButton([
{
cls: 'x-btn-icon pdf-button',
tooltip: fcl.util.getMessage("viewAsPDF")
},
{
cls: 'x-btn-icon excel-button',
tooltip: fcl.util.getMessage("viewAsExcel")
}]);
b[0].getEl().child(".x-btn-center", true).innerHTML = "[/url]";
b[1].getEl().child(".x-btn-center", true).innerHTML = "[url='" + excelUrl + "'] ('" + pdfUrl + "')";
b[0].getEl().un("click", b[0].onClick);
b[1].getEl().un("click", b[1].onClick);


But now I have the following in my overrides file - just a minor addition and change - could you add it to the main branch?



Ext.override(Ext.Button, {
render : function(renderTo){
var btn;
if(!this.dhconfig){
if (this.href) { // <a> element wanted.
if(!Ext.Button.anchorTemplate){
// another hideous table template
Ext.Button.anchorTemplate = new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"> </td><td class="x-btn-center">{0} ({2})</td><td class="x-btn-right"> </td>',
"</tr></tbody></table>");
}
btn = Ext.Button.anchorTemplate.append(renderTo, [this.text || ' ', this.tooltip || "", this.href, this.target || "_self"], true);
} else {
if(!this.template){
if(!Ext.Button.buttonTemplate){
// hideous table template
Ext.Button.buttonTemplate = new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"> </td><td class="x-btn-center"><button class="x-btn-text" ext:qtip="{1:htmlEncode}">{0}</button></td><td class="x-btn-right"> </td>',
"</tr></tbody></table>");
}
this.template = Ext.Button.buttonTemplate;
}
btn = this.template.append(renderTo, [this.text || ' ', this.tooltip || ""], true);
}
if(this.cls){
btn.addClass(this.cls);
}
if(this.icon){
btn.child("button:first").setStyle('background-image', 'url(' +this.icon +')');
}
}else{
btn = Ext.DomHelper.append(Ext.get(renderTo).dom, this.dhconfig, true);
}
this.el = btn;
if(this.menu){
this.el.addClass("x-btn-with-menu");
this.menu.on("show", this.onMenuShow, this);
this.menu.on("hide", this.onMenuHide, this);
}
this.autoWidth();
btn.addClass("x-btn");
btn.on("click", this.onClick, this);
btn.on("mouseover", this.onMouseOver, this);
btn.on("mouseout", this.onMouseOut, this);
btn.on("mousedown", this.onMouseDown, this);
btn.on("mouseup", this.onMouseUp, this);
if(this.hidden){
this.hide();
}
if(this.disabled){
this.disable();
}
Ext.ButtonToggleMgr.register(this);
if(this.pressed){
this.el.addClass("x-btn-pressed");
}
if(this.repeat){
var repeater = new Ext.util.ClickRepeater(btn,
typeof this.repeat == "object" ? this.repeat : {}
);
repeater.on("click", this.onClick, this);
}
},

onClick : function(e){
if(e && !this.href){ // Prevent default unless it's a link
e.preventDefault();
}
if(!this.disabled){
if(this.enableToggle){
this.toggle();
}
if(this.menu && !this.menu.isVisible()){
this.menu.show(this.el, this.menuAlign);
}
this.fireEvent("click", this, e);
if(this.handler){
this.handler.call(this.scope || this, this, e);
}
}
}
});


(Formatting looks OK in Eclipse - just not in PHPBB!)

[Animal]

Then I can just do:



this.gridToolbar.addButton([
{
cls: 'x-btn-icon pdf-button',
href: pdfUrl,
target: "_blank",
tooltip: fcl.util.getMessage("viewAsPDF")
},
{
cls: 'x-btn-icon excel-button',
href: excelUrl,
tooltip: fcl.util.getMessage("viewAsExcel")
}]);
:D

[lenzb]

Did this functionality get added to Ext? It doesn't look like it based on my inspection of the Ext 1.0 code. I'd like to do something similar and am wondering if I need to apply the custom patch or if this functionality will be available at some point.

Brian

[seade]

Looks like it is not in 1.1-rc1 either. This is a shame - it would be great to be able to easily add link buttons to toolbars.

[seade]

Updated for 1.1-rc1:


// Override Ext.Button to allow link buttons.
// Updated for ext-1.1-rc1 from: http://extjs.com/forum/showthread.php?t=2498
Ext.override(Ext.Button, {
render : function(renderTo){
var btn;
if(this.hideParent){
this.parentEl = Ext.get(renderTo);
}
if(!this.dhconfig){
if (this.href) { // <a> element wanted.
if(!Ext.Button.anchorTemplate){
// another hideous table template
Ext.Button.anchorTemplate = new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"></td><td class="x-btn-center"><a href="{1}" target="{2}">{0}</a></td><td class="x-btn-right"></td>',
"</tr></tbody></table>");
}
btn = Ext.Button.anchorTemplate.append(renderTo, [this.text || ' ', this.href, this.target || "_self"], true);
} else {
if(!this.template){
if(!Ext.Button.buttonTemplate){
// hideous table template
Ext.Button.buttonTemplate = new Ext.Template(
'<table border="0" cellpadding="0" cellspacing="0" class="x-btn-wrap"><tbody><tr>',
'<td class="x-btn-left"><i> </i></td><td class="x-btn-center"><em unselectable="on"><button class="x-btn-text" type="{1}">{0}</button></em></td><td class="x-btn-right"><i> </i></td>',
"</tr></tbody></table>");
}
this.template = Ext.Button.buttonTemplate;
}
btn = this.template.append(renderTo, [this.text || ' ', this.type], true);
var btnEl = btn.child("button:first");
btnEl.on('focus', this.onFocus, this);
btnEl.on('blur', this.onBlur, this);
}
if(this.cls){
btn.addClass(this.cls);
}
if(this.icon){
btnEl.setStyle('background-image', 'url(' +this.icon +')');
}
if(this.iconCls){
btnEl.addClass(this.iconCls);
if(!this.cls){
btn.addClass(this.text ? 'x-btn-text-icon' : 'x-btn-icon');
}
}
if(this.tabIndex !== undefined){
btnEl.dom.tabIndex = this.tabIndex;
}
if(this.tooltip){
if(typeof this.tooltip == 'object'){
Ext.QuickTips.tips(Ext.apply({
target: btnEl.id
}, this.tooltip));
} else {
btnEl.dom[this.tooltipType] = this.tooltip;
}
}
}else{
btn = Ext.DomHelper.append(Ext.get(renderTo).dom, this.dhconfig, true);
}
this.el = btn;
if(this.id){
this.el.dom.id = this.el.id = this.id;
}
if(this.menu){
this.el.child(this.menuClassTarget).addClass("x-btn-with-menu");
this.menu.on("show", this.onMenuShow, this);
this.menu.on("hide", this.onMenuHide, this);
}
btn.addClass("x-btn");
if(Ext.isIE && !Ext.isIE7){
this.autoWidth.defer(1, this);
}else{
this.autoWidth();
}
if(this.handleMouseEvents){
btn.on("mouseover", this.onMouseOver, this);
btn.on("mouseout", this.onMouseOut, this);
btn.on("mousedown", this.onMouseDown, this);
}
btn.on(this.clickEvent, this.onClick, this);
//btn.on("mouseup", this.onMouseUp, this);
if(this.hidden){
this.hide();
}
if(this.disabled){
this.disable();
}
Ext.ButtonToggleMgr.register(this);
if(this.pressed){
this.el.addClass("x-btn-pressed");
}
if(this.repeat){
var repeater = new Ext.util.ClickRepeater(btn,
typeof this.repeat == "object" ? this.repeat : {}
);
repeater.on("click", this.onClick, this);
}
},

onClick : function(e){
if(e && !this.href){ // Prevent default unless it's a link
e.preventDefault();
}
if(e.button != 0){
return;
}
if(!this.disabled){
if(this.enableToggle){
this.toggle();
}
if(this.menu && !this.menu.isVisible()){
this.menu.show(this.el, this.menuAlign);
}
this.fireEvent("click", this, e);
if(this.handler){
this.el.removeClass("x-btn-over");
this.handler.call(this.scope || this, this, e);
}
}
}
});

This doesn't handle a tooltip on a href button, but it works pretty well for regular buttons.

I also added a little css:


.x-btn-center a {
text-decoration:none;
color:#233d6d;
}


Scott

[vmorale4]

+1 For this being added to Ext 2.0

[wuschba]

Any news about this one?