PDA

View Full Version : Adding anchor elements as Toolbar buttons



Animal
22 Feb 2007, 8:29 AM
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
22 Feb 2007, 8:34 AM
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
2 May 2007, 8:14 AM
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
17 Jul 2007, 4:42 AM
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
17 Jul 2007, 5:54 AM
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
4 Jun 2008, 1:32 PM
+1 For this being added to Ext 2.0

wuschba
20 Jul 2008, 8:25 AM
Any news about this one?