PDA

View Full Version : Updating href value of a button



Anthony.Hall
18 May 2012, 7:11 AM
I wish to change the href value of my button

var worksheet = Ext.getCmp('partWorksheet');
worksheet.href = '/misreport/PartWorkSheet/' + jobId

When i look in firebug i can see that the value is there. However the button doesn't link to new location.

Am i setting value the correct way

20 May 2012, 4:10 AM
you are but you're missing a critical point!

using href causes an anchor tag to be embedded in the button's url:



renderTpl: [
'<em id="{id}-btnWrap"<tpl if="splitCls"> class="{splitCls}"</tpl>>',
'<tpl if="href">',
'<a id="{id}-btnEl" href="{href}" class="{btnCls}" target="{hrefTarget}"',
'<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
' role="link">',
'<span id="{id}-btnInnerEl" class="{baseCls}-inner">',
'{text}',
'</span>',
'<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}"<tpl if="iconUrl"> style="background-image:url({iconUrl})"</tpl>></span>',
'</a>',
'<tpl else>',
'<button id="{id}-btnEl" type="{type}" class="{btnCls}" hidefocus="true"',
// the autocomplete="off" is required to prevent Firefox from remembering
// the button's disabled state between page reloads.
'<tpl if="tabIndex"> tabIndex="{tabIndex}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
' role="button" autocomplete="off">',
'<span id="{id}-btnInnerEl" class="{baseCls}-inner" style="{innerSpanStyle}">',
'{text}',
'</span>',
'<span id="{id}-btnIconEl" class="{baseCls}-icon {iconCls}"<tpl if="iconUrl"> style="background-image:url({iconUrl})"</tpl>></span>',
'</button>',
'</tpl>',
'</em>',
'<tpl if="closable">',
'<a id="{id}-closeEl" href="#" class="{baseCls}-close-btn" title="{closeText}"></a>',
'</tpl>'
],


So the rendered HTML looks a little like:
http://moduscreate.com/i/2012-05-20_0808.png

The only way to do this is to use selectors to get a reference the underlying element, then set the attribute accordingly.

This creates a window with a button that points to cnn.com


new Ext.Window({
height : 100,
width : 100,
items : new Ext.Button({ id : 'btn', href : 'http://cnn.com' })
}).show()

This changes the attribute accordingly.

Ext.getCmp('btn').el.down('a').dom.setAttribute('href', 'http://sencha.com')


All that said, using static IDs in your application is BAD practice.