PDA

View Full Version : Adding fieldset under MessageBox message.



plalx
13 Sep 2010, 7:52 AM
Hi,

I am trying to add a fieldset component right under the message and icon of a Ext.MessageBox message.
While adding the fieldset works, it is getting added before the HTML contained into the dialog window.

See image below:

22379


This is the code I am using to add the fieldset:


Ext.Msg.getDialog().add({
xtype: 'fieldset',
title: 'Details',
html: o.message,
collapsible: true,
collapsed: true,
border: false
});I have also tried to render a div tag after all other tags in the body and then render the fieldset to this div... it worked but it looks like an ugly solution.

Any ideas?

Thanks!

Condor
14 Sep 2010, 6:16 AM
I wouldn't recommend doing that. It will probably break all the other instances where you are using Ext.MessageBox.

Instead, create a whole new Ext.Window with your fieldset in it.

plalx
14 Sep 2010, 6:55 AM
I have thinked about creating a new window, but I think I finally came up with an interesting solution. That solution allows me to call Ext.Msg.show() passing a details argument (message contained in fieldset) as a config option. If details config option is not passed, the fieldset is hidden.

Here's the code (it can surely be optimized):




var
diag = Ext.MessageBox.getDialog(),
div = diag.body.child('div.ext-mb-content').createChild({
tag: 'div',
id: 'x-mb-details',
style: 'margin-top: 20px; display: none;'
});

new Ext.form.FieldSet({
renderTo: div,
title: 'Details',
collapsible: true,
collapsed: true,
border: false,
style: 'margin: 0; padding: 0;',
bodyStyle:'padding: 5px 0px 0px 20px;',
listeners: {
afterrender: function() {
var legend = this.getEl().down('legend');
legend.setStyle({
padding: '0',
margin: '0'
});
}
}
});

Ext.MessageBox.show = Ext.MessageBox.show.createSequence(function(config) {
var
details = Ext.get('x-mb-details'),
disp = Ext.isString(config.details);

if (disp)
details.child('div.x-fieldset-body').update(config.details);

details.setStyle('display', (disp)? 'block': 'none');
});
Then I can do this in my app:


Ext.MessageBox.show({
title: 'Test',
msg: 'This is a test message',
details: 'Lots of details....',
icon: Ext.Msg.INFO
});
22401