Adjust width of Ext.Msg in Sencha touch

Question

I am trying to develop a mobile app using Sencha touch .I need to show a custom message box with 4 buttons.But i cannot change the with of message box,because of that only 3 buttons are visible in the message.please anyone help me to adjust the width of Message Box.Following is the code i am using

Ext.Msg.show({ title : '', msg : '', width : 300, height : 300,

     buttons : [{
     itemId : 'A',
     text : 'A',
     ui : 'action',
     }, {
     itemId : 'B',
     text : 'B',
     ui : 'action'
     }, {
     itemId : 'C',
     text : 'C',
     ui : 'action'
     }, {
     itemId : 'D',
     text : 'D',
     ui : 'action'
     }, {
     itemId : 'E',
     text : 'E',
     ui : 'action'
     }, {
     itemId : 'F',
     text : 'F',
     ui : 'action'
     }]
     });

Thanks in advance .....

Answer 1

call doComponentLayout() after showing. i.e. Ext.Msg.show(confObj).doComponentLayout();

Update

http://jsfiddle.net/p5K4q/25/