Closing an Ext.Msg.prompt thought code

[Dumas]

How can I virtually "press" the ok button of an Ext.Msg.prompt and trigger the callback function with the buttonId value 'ok'?

thanks
Roland

[jerome76]

Just wondering why you would need the prompt in this case? Are you talking about in the event that the user keys in values into the textfield and then presses the 'Done' button on the virtual keyboard then you want the prompt to disappear?

[Dumas]

Yes, exactly.

Since this is not provided out of the box I wanted to add this. It works by keeping a reference to the Ext.Msg.prompt() result and and calling result.hide();, but a static method would be nicer

[jerome76]

You'll notice that in the source code for Ext.MessageBox, there is a 'prompt' config that you can specify.

/**
 * @cfg {String} message
 * The message to be displayed in the {@link Ext.MessageBox}.
 * @accessor
 */
message: null,


/**
 * @cfg {String} msg
 * The message to be displayed in the {@link Ext.MessageBox}.
 * @removed 2.0.0 Please use {@link #message} instead.
 */


/**
 * @cfg {Object} prompt
 * The configuration to be passed if you want an {@link Ext.field.Text} or {@link Ext.field.TextArea} field
 * in your {@link Ext.MessageBox}.
 *
 * Pass an object with the property "multiline" with a value of true, if you want the prompt to use a TextArea.
 *
 * Alternatively, you can just pass in an object which has an xtype/xclass of another component.
 *
 *     prompt: {
 *         xtype: 'textarea',
 *         value: 'test'
 *     }
 *
 * @accessor
 */
prompt: null,

You can add a listener to your textfield prompt for the 'keyup' event and when the key value is 13 or 10 or 11 (can't remember which is which), you can go to the function.

//something like

Ext.Msg.show({
    title: 'Prompt',
    message: 'This is prompt',
    prompt: {
        xtype: 'textfield',
        listeners: {
            keyup: (fld, e){
                if (e.browserEvent.keyCode == 13 || e.browserEvent.keyCode == 10 || e.browserEvent.keyCode == 11) {
                    e.stopEvent();
                    fld.element.dom.blur();
                    window.scrollTo(0,0);
                    //do function and hide prompt
                }
            }
        }
    }
});

[Dumas]

Hello,

sorry for the late respond. This blurs the field, but it doesn't close it.
I still need to close the prompt and trigger the prompt callback...

It works when I do this instead of the blur:
Ext.Msg.onClick(Ext.Msg.buttonsToolbar.getItems().getByKey('ok'));

But this is really ugly code, since I'm using private functions here.

Any better idea?

Thanks
Roland

[warrean]

Hi,


I don't know if it's an option, but you can manually provide the button-configuration:

Ext.Msg.show(                {
                    title : 'Confirm',
                    message : "Are you sure you? ",
                    buttons : [
                        {
                            itemId: 'ok'
                            text   : 'Yes'
                        }
                     ],
                     fn: function (buttonId, value, opt) {
                      .....

And then later on access its 'itemId' property and fire the click event

Ext.ComponentQuery.query('#ok').click()

[Dumas]

I'm looking for a generic version, so I will go with the following:

/**
 * Prompts should by default close on an enter press
 */
Ext.Msg.on('show', function(cmp) {
    if(Ext.Msg.getPrompt() === null){
        return; // there is a config object this time
    }
    // every time there is a prompt config, apply listener
    Ext.Msg.getPrompt().on('keyup', function(field, e) {
        if(e.browserEvent.keyCode===13) {
            e.stopEvent();
            // fake a on-button press
            Ext.Msg.onClick(Ext.Msg.buttonsToolbar.getItems().getByKey('ok'));
        }
    });
}); 

thanks for the help!
Roland