ExtJS 中的 NumberField 提示答案

【问题标题】：NumberField prompt in ExtJSExtJS 中的 NumberField 提示
【发布时间】：2012-12-15 21:40:47
【问题描述】：

我正在尝试显示带有数字字段而不是常规文本字段的 MessageBox.prompt。我无法创建一个新的 MessageBox，所以我决定只使用验证器，但我也遇到了一些问题。

所以任何东西都对我有用，MessageBox 的数字验证器或带有数字字段而不是文本字段的 MessageBox。

这是我的消息框...

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

对此有什么想法吗？

更新

我设法让验证器正常工作，但我更愿意使用数字字段而不是文本字段，所以问题的第一部分仍然存在。

如何在 ExtJS 的 MessageBox.prompt 上显示数字字段而不是文本字段。

【问题讨论】：

标签： extjs messagebox prompt

【解决方案1】：

看来，如果没有“黑客”，他就无法完成。 Ext.Msg 是一个单例，在 initComponent 中设置了文本字段并且它是不可配置的。 http://docs.sencha.com/ext-js/4-1/source/MessageBox.html#Ext-window-MessageBox-method-initComponent

由于它是单例，因此覆盖将不起作用，也不是解决问题的好方法。

Messagebox 的扩展应该可以工作，但必须查看代码每次 Ext 升级，因为 MessageBox 代码没有很多钩子。

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】：

以下（hack？）适用于我的具体情况：注意 - 由于 Ext.MessageBox （可能）是一个全局对象，因此必须将其重置为在需要数字过滤以外的后续上下文中使用。

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
});

【讨论】：

var oldMBText = Ext.MessageBox.textField;在此块之前... Ext.MessageBox.textField = oldMBText;在这个块之后..