NumberField prompt in ExtJS

Question

I'm trying to show a MessageBox.prompt with a numberfield instead of a regular textfield. I couldn't go around creating a new MessageBox so I decided to just use a validator instead, but I'm having some trouble with it too.

So anything will work for me, either a number validator for a MessageBox or a MessageBox with a numberfield instead of textfield.

Here's my MessageBox...

var msgbox = Ext.Msg.prompt('Quantity', 'Enter a number',function(btn, text){} )

Any ideas for this?

UPDATE

I managed to get the validator working, but I would much rather have a numberfield instead of a textfield, so the first part of the question is still up.

How do I get to show a numberfield instead of a textfield on a MessageBox.prompt on ExtJS.

Answer 1

It looks like his can't be done without a "hack". Ext.Msg is a singleton and in the initComponent the text field is set up and it is not configurable. http://docs.sencha.com/ext-js/4-1/source/MessageBox.html#Ext-window-MessageBox-method-initComponent

Since it is a singleton an override will not work and it not a good solution to the problem.

An extension of Messagebox should work but the code will have to be looked at on every Ext upgrade since the MessageBox code does not have many hooks.

Ext.define('NumberPrompt', {
    extend: 'Ext.window.MessageBox',
    initComponent: function() {
        this.callParent();
        var index = this.promptContainer.items.indexOf(this.textField);
        this.promptContainer.remove(this.textField);
        this.textField = this._createNumberField();
        this.promptContainer.insert(index, this.textField);
    },

    _createNumberField: function() {
        //copy paste what is being done in the initComonent to create the textfield
        return new Ext.form.field.Number({
                        id: this.id + '-textfield',
                        anchor: '100%',
                        enableKeyEvents: true,
                        listeners: {
                            keydown: this.onPromptKey,
                            scope: this
                        }
        });
    }
});



var msgbox = new NumberPrompt().prompt('Quantity', 'Enter a number',function(btn, text){} )