ExtJSのメッセージを表示するコンボボックス

Question

私はExtJSのMSGにコンボボックスを追加する方法を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'); 
      } 
     } 
    } 
});