【问题标题】: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;在这个块之后..
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-02-27
      • 1970-01-01
      • 1970-01-01
      • 2019-08-06
      • 1970-01-01
      • 2012-02-01
      相关资源
      最近更新 更多