Question

I am using the following code to render a message box to a specific div in my application.

I would like to only mask out the div i render to and position the message box and buttons in the centre of the div.

The modal appears over the whole document which is undesirable and the message box is not centred in the div either. Cannot see a way to configure this to the desired result.

Ext.Msg.show({
    title: 'Access',
    msg: 'You do not have access to the current client, would you like access?',
    buttons: Ext.Msg.YESNOCANCEL,
    icons: Ext.Msg.QUESTION,
    renderTo: Ext.get('client-reports-tab'),
    modal: false
});

I tried just with a loading mask and that just masks the div but does not give me the calls to actions:

Ext.get('client-reports-tab').mask('You do not have access to this client, <a href="javascript:void()" class="client-coverage">please request access<\/a>', 'cct-msg-mask');

Please escuse the javascript:void() it won’t be going into the production version 🙂

Answer 1

Solved with alignTo:

var msg = Ext.Msg.show({
            title: 'Access',
            msg: 'You do not have access to the current client, would you like access?',
            buttons: Ext.Msg.OK,
            icons: Ext.Msg.QUESTION,
            modal: false
        });

msg.alignTo(Ext.get('client-reports-tab'), 'c-c');

With help from:

Applying loadMask() to a single element in extjs?