PDA

View Full Version : [FIXED-EXTJSIV-192]Button.setText problem when original text is longer than minWidth



estesbubba
21 Mar 2011, 8:24 AM
I have a toolbar where I set the minimum button width. When updating to PR5 a bug was introduced. If you have a button with text that causes it to be wider than minWidth, calling setText() with shorter text causes it to not honor minWidth.

Save this as button.js in examples/button and you'll see what happens. Small button has the problem but Medium and Large are OK. Click the button to see the problem.



Ext.require('Ext.button.*');
Ext.onReady(function() {
var genericConfig = [{
_name: 'Text Only'
},{
_name : 'Disabled',
disabled: true
},{
_name : 'Icon Only',
text : null,
iconCls: 'add'
},{
_name : 'Icon and Text (left)',
iconCls: 'add',
iconAlign: 'left'
},{
_name : 'Icon and Text (top)',
iconCls: 'add',
iconAlign: 'top'
},{
_name : 'Icon and Text (right)',
iconCls: 'add',
iconAlign: 'right'
},{
_name : 'Icon and Text (bottom)',
iconCls: 'add',
iconAlign: 'bottom'
}],
menu = {
items: [{
text:'Menu Item 1'
},{
text:'Menu Item 2'
},{
text:'Menu Item 3'
}]
};

function renderButtons(title, configs, defaultConfig) {
Ext.getBody().createChild({
tag : 'h2',
html: title
});

Ext.each(configs, function(config) {
var generateButtons = function(config) {
//Ext.each(['gray', 'darkgray', 'blue', 'darkblue', 'red', 'green'], function(color) {
Ext.each(['default'], function(color) {
Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
text : 'This is some long text (Breaks)',
scale: 'small',
color: color,
minWidth: 100,
handler: function() {
this.setText('Small');
}
}, config, defaultConfig));

Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
text : 'Medium (OK)',
scale: 'medium',
color: color,
minWidth: 100,
handler: function() {
this.setText('Med');
}
}, config, defaultConfig));

Ext.createWidget(defaultConfig.defaultType || 'button', Ext.apply({
text : 'Large (OK)',
scale: 'large',
color: color,
minWidth: 100,
handler: function() {
this.setText('Lrg');
}
}, config, defaultConfig));
}, this);
};

Ext.getBody().createChild({
tag : 'h3',
html: config._name
});

var el = Ext.getBody().createChild({});

if (config.children) {
Ext.each(config.children, function(child) {
el = el.createChild({
children: [
{
tag : 'h4',
html: child._name
}
]
});
}, this);
} else {
generateButtons(Ext.apply(config, {
renderTo: el
}));
}
}, this);
}

renderButtons('Normal Buttons', genericConfig, {
cls: 'floater'
});

renderButtons('Toggle Buttons', genericConfig, {
cls: 'floater',
enableToggle: true
});

renderButtons('Menu Buttons', genericConfig, {
cls: 'floater',
menu : menu
});

renderButtons('Split Buttons', genericConfig, {
cls: 'floater',
defaultType: 'splitbutton',
menu : menu
});

renderButtons('Menu Buttons (Arrow on bottom)', genericConfig, {
cls: 'floater',
menu : menu,
arrowAlign: 'bottom'
});

renderButtons('Split Buttons (Arrow on bottom)', genericConfig, {
cls: 'floater',
defaultType: 'splitbutton',
menu : menu,
arrowAlign: 'bottom'
});
});

jjohnston
8 Apr 2011, 1:06 PM
This issue has been fixed. Thanks for reporting!