NumberField prompt in ExtJS

问题

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.

回答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){} )

回答2:

The following (hack?) works in my specific case: Note - since Ext.MessageBox is (presumably) a global object, it must be reset to be used in a subsequent context where other than numeric filtering is required.

var mbtext = Ext.MessageBox.textField;
mbtext.maskRe = /[0-9:]/;
mbtext.regex = /[0-9]+(:[0-9]+)?/;
Ext.MessageBox.prompt('Numeric Only', 'Enter a number: ', function(btn, text) {
  if (btn !== 'ok') return;
  if (! text) return; 
  // ... now do the work with the numeric result in text
});

来源：https://stackoverflow.com/questions/13896474/numberfield-prompt-in-extjs

标签

extjs

messagebox

prompt