A quick fix you could store off the width then apply it back when needed.
Code:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.Viewport.add({
xtype: 'titlebar',
docked: 'top',
title: 'Navigation',
items: [{
align: 'left',
id: 'backButton',
text: 'Short'
}, {
iconCls: 'home',
align: 'right',
handler: function() {
var titleBar = this.up('titlebar')
if (titleBar) {
var backBtn = titleBar.down('#backButton');
if (backBtn) {
if (backBtn.getText() === 'Short') {
//store off the original width
//
backBtn.origWidth = backBtn.element.getWidth();
backBtn.setText('This button has a super long title that causes the ellipses to appear');
} else {
backBtn.setText('Short');
//if original width found use it
//
if (backBtn.origWidth){
backBtn.element.setWidth(backBtn.origWidth)
backBtn.origWidth = null;
}
}
}
}
}
}]
});
}
});