ExtJS的消息显示组合框

Question

我使用ExtJS的4

Ext.Msg.show({ 
title: 'test title',
   
msg:  'test msg',
   
buttons: Ext.MessageBox.OKCANCEL, 
}); 

如何添加组合框味精？ 谢谢

Answer 1

Ext.Msg只是一个小消息窗口，所以它不支持组合或任何其他组件，除了带有按钮的简单文本外。

Window组件将更加准确地满足您的需求（http://docs.sencha.com/ext-js/4-0/#!/api/Ext.window.Window）。

Answer 2

Ext.MessageBox是单身，所以你可以用下面的方法是直接覆盖的方法，此方法将ExtJS的3.2.1工作，不知道它会与ExtJS的工作4

Ext.MessageBox.show = function() { 
    if (this.inputField) this.inputField.destroy(); //destroy inputField created from previous call 
     if(this.isVisible()){ 
       this.hide(); 
      } 
      opt = options; 
      var d = this.getDialog(opt.title || " "); 

      d.setTitle(opt.title || " "); 
      var allowClose = (opt.closable !== false && opt.progress !== true && opt.wait !== true); 
      d.tools.close.setDisplayed(allowClose); 
      activeTextEl = textboxEl; 
      opt.prompt = opt.prompt || (opt.multiline ? true : false) || (opt.inputField ? true : false); 
      if(opt.prompt){ 
       if(opt.multiline){ 
        textboxEl.hide(); 
        textareaEl.show(); 
        textareaEl.setHeight(Ext.isNumber(opt.multiline) ? opt.multiline : this.defaultTextHeight); 
        activeTextEl = textareaEl; 
       }else if(opt.inputField){ 
        textboxEl.hide(); 
        textareaEl.hide(); 
        this.inputField = opt.inputField; 
        this.inputField.render(bodyEl); 
        activeTextEl = this.inputField; 
        activeTextEl.dom = {}; 
         activeTextEl.on('select', function(cb) { 
          activeTextEl.dom.value = cb.getValue(); 
        }); 
       }else{ 
        textboxEl.show(); 
        textareaEl.hide(); 
       } 
      }else{ 
       textboxEl.hide(); 
       textareaEl.hide(); 
      } 
      activeTextEl.dom.value = opt.value || ""; 
      if(opt.prompt){ 
       d.focusEl = activeTextEl; 
      }else{ 
       var bs = opt.buttons; 
       var db = null; 
       if(bs && bs.ok){ 
        db = buttons["ok"]; 
       }else if(bs && bs.yes){ 
        db = buttons["yes"]; 
       } 
       if (db){ 
        d.focusEl = db; 
       } 
      } 
      if(opt.iconCls){ 
       d.setIconClass(opt.iconCls); 
      } 
      this.setIcon(Ext.isDefined(opt.icon) ? opt.icon : bufferIcon); 
      bwidth = updateButtons(opt.buttons); 
      progressBar.setVisible(opt.progress === true || opt.wait === true); 
      this.updateProgress(0, opt.progressText); 
      this.updateText(opt.msg); 
      if(opt.cls){ 
       d.el.addClass(opt.cls); 
      } 
      d.proxyDrag = opt.proxyDrag === true; 
      d.modal = opt.modal !== false; 
      d.mask = opt.modal !== false ? mask : false; 
      if(!d.isVisible()){ 
       // force it to the end of the z-index stack so it gets a cursor in FF 
       document.body.appendChild(dlg.el.dom); 
       d.setAnimateTarget(opt.animEl); 
       //workaround for window internally enabling keymap in afterShow 
       d.on('show', function(){ 
        if(allowClose === true){ 
         d.keyMap.enable(); 
        }else{ 
         d.keyMap.disable(); 
        } 
       }, this, {single:true}); 
       d.show(opt.animEl); 
      } 
      if(opt.wait === true){ 
       progressBar.wait(opt.waitConfig); 
      } 
      return this;    
}; 

Ext.MessageBox.show({ 
    title: 'Choose', 
    msg: 'Which one?', 
    value: 'choice 2', 
    buttons: Ext.MessageBox.OKCANCEL, 
    inputField: new Ext.ComboBox(
    { 
     typeAhead: true, 
     displayField: 'choice', 
     store: store, 
     mode: 'local', 
     triggerAction: 'all', 
     forceSelection: true 
    }), 
    fn: function(buttonId, text) { 
     if (buttonId == 'ok') 
      Ext.Msg.alert('Your Choice', 'You chose: "' + text + '".'); 
    } 
}); 

参考：

http://www.sencha.com/forum/showthread.php?104375-Ext.MessageBox-prompt-with-ComboBox-DateField-or-any-input-field

Answer 3

这是为了从Ext.Msg删除标准文本字段，然后加入定制的组件的技术。

Ext.define('ComboBoxPrompt', { 
     extend: 'Ext.window.MessageBox', 

     initComponent: function() { 
       this.callParent(); 
       var index = this.promptContainer.items.indexOf(this.textField); 
       this.promptContainer.remove(this.textField); // remove standard prompt 
       this.textField = this._createComboBoxField(); 
       this.promptContainer.insert(index, this.textField); 
     }, 

     _createComboBoxField: function() { 
       //copy paste what is being done in the initComonent to create the combobox 
       return Ext.create('Ext.form.field.ComboBox', { 

         id: this.id + '-combo', 

         typeAhead: true, 
         displayField: 'value', 
         valueField: 'id', 
         store: someStore, 
         mode: 'remote', // local 
         triggerAction: 'all', 
         forceSelection: true, 

         autoSelect: false, 
         hideTrigger: true, 
         minChars: 1, 

         enableKeyEvents: true, 

         listeners: { 
           change: function (obj, newValue, oldValue, eOpts) { 
             //someStore.proxy.extraParams.keyword = newValue; 
             //someStore.load(); 
           } 
         } // listeners 





       }); 
     } 
}); 



var msgbox = Ext.create('ComboBoxPrompt').prompt('New Record', 'Object Name', 
     function (btn, text) { 
       if (btn == 'ok') { 
         Ext.MessageBox.alert('Result', text); 
       } 
     }) 

Answer 4

这是另一种方法。这有一些硬编码，但应该工作。

Ext.MessageBox.show({ 
    title: 'Verification', 
    msg: 'Please approve by checking the box below.<br /><br /><select id="approval"><option value="1">approved</option><option value="2">denied</option><option value="3">unsure</option></select>', 
    buttons: Ext.MessageBox.OKCANCEL, 
    fn: function (btn) { 
     if (btn == 'ok') { 
      if (Ext.get('approval').getValue() == "1") { 
       Ext.MessageBox.alert('Result', 'approved'); 
      else if (Ext.get('approval').getValue() == "2") { 
       Ext.MessageBox.alert('Result', 'denied'); 
      else if (Ext.get('approval').getValue() == "3") { 
       Ext.MessageBox.alert('Result', 'unsure'); 
      } 
     } 
    } 
});