PDA

View Full Version : button text in prompt gets truncated



mf913
17 Oct 2013, 6:19 AM
We overrride buttonText in our YESNOCANCEL messagebox.
Intermittently, in 4.2.1, the button size does not get adjusted properly so the text gets truncated. I have attached a screenshot of the messagebox. We have never seen this in 4.1.3.

I'm not sure how to make it reproducible because it happens intermittently. Is it a known issue in 4.2.1 ?



Ext.Msg.show({
closable: false,
scope: _scope,
title: 'Save Changes',
msg: 'You have pending changes. What would you like to do?',
buttons: Ext.Msg.YESNOCANCEL,
buttonText: {
yes: "Save and Continue",
no: "Undo Changes and Continue",
cancel: "Cancel"
},
icon: Ext.Msg.QUESTION,
fn: function (savechanges) {
if (savechanges == 'yes') {
} else if (savechanges == 'no') {
} else if (savechanges == 'cancel') {
}
}
});

Gary Schlosberg
17 Oct 2013, 8:23 AM
Thanks for the report. Can you please post a runnable test case which exhibits the problem? Best way is to create a Sencha Fiddle (https://fiddle.sencha.com/#home) and post a link to it.

mf913
17 Oct 2013, 8:30 AM
Gary,
The problem is that it is intermittent. 90% of the time the buttons will show up fine. All we can do is capture the screenshot to show what the Messagebox looks like when it's not working properly. I have corrected the scope in the sample code we use. Like i said, it works properly 90% of the time...



Ext.Msg.show({
closable: false,
scope: this,
title: 'Save Changes',
msg: 'You have pending changes. What would you like to do?',
buttons: Ext.Msg.YESNOCANCEL,
buttonText: {
yes: "Save and Continue",
no: "Undo Changes and Continue",
cancel: "Cancel"
},
icon: Ext.Msg.QUESTION,
fn: function (savechanges) {
if (savechanges == 'yes') {
} else if (savechanges == 'no') {
} else if (savechanges == 'cancel') {
}
}
});

Gary Schlosberg
17 Oct 2013, 8:58 AM
Intermittent ones are definitely a pain. The working test case allows me to try against other versions, etc. so thanks for updating it. So far I haven't gotten it to happen once yet, but hoping maybe there's a way to get it to happen regularly enough for our engineers to see it.

mf913
21 Oct 2013, 11:42 AM
Hi Gary,
finally able to reproduce it.
1) Click "Click me 1" button first
2) click "Yes" or "No" (doesn't matter)
3) Click "Click me 2" button
you will see the text truncated.

If you start off with "Click me 2" button, the text is fine.

This is fine in 4.1.3. But not in 4.2.1
Thanks




Ext.create('Ext.Button', {
text: 'Click me 1',
renderTo: Ext.getBody(),
handler: function() {
Ext.Msg.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION
});
}
});


Ext.create('Ext.Button', {
text: 'Click me 2',
renderTo: Ext.getBody(),
handler: function() {
Ext.Msg.show({

title:'Save Changes?',
msg: 'You have pending changes. What would you like to do?',
buttons: Ext.Msg.YESNOCANCEL,
buttonText: {
yes: "Save and Continue",
no: "Undo Changes and Continue",
cancel: "Cancel"
},
icon: Ext.Msg.QUESTION
});
}
});

mf913
22 Oct 2013, 9:07 AM
ok... i also filed a ticket in sench support...
Here is the ticket EXTJSIV-11544

(https://support.sencha.com/index.php#)

Gary Schlosberg
22 Oct 2013, 9:15 AM
Thanks for the update. Glad to hear that you were able to get it to fail regularly so we can get it fixed.

Sabareesh
17 Jul 2014, 3:33 AM
Hi

Is this issue resolved ?


thanks
Sabareesh.

mf913
17 Jul 2014, 4:22 AM
we have 4.2.1... Sencha support gave us this override and it seems to be working so far


Ext.define('Override.layout.component.Button', { override : 'Ext.layout.component.Button',


beginLayoutCycle : function(ownerContext) {
var owner = this.owner, lastWidthModel = this.lastWidthModel, btnInnerEl = owner.btnInnerEl;


this.callParent(arguments);


if (lastWidthModel && !this.lastWidthModel.shrinkWrap && ownerContext.widthModel.shrinkWrap) {
// clear any heights we set last time around if needed
owner.btnWrap.setStyle('height', '');
owner.btnEl.setStyle('height', '');
btnInnerEl.setStyle('line-height', '');
}


if (owner.getFrameInfo().table) {
btnInnerEl.setStyle('width', '');
btnInnerEl.setStyle('height', '');
}
}
});