extjs 留言显示 combobox

Question

I use extjs 4

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

how to add combobox to msg? thanks

Answer 1

Here's another approach. This has a bit of hard coding, but should work.

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

Working fiddle: http://jsfiddle.net/nk9j7dga/

Answer 2

This is a technique to remove the standard textfield from the Ext.Msg and then adding a custom component.

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 3

Ext.Msg is only a little message window, so it does not support combos nor any other component beyond a simple text with some buttons.

The Window component will fit your needs more accurately ( http://docs.sencha.com/ext-js/4-0/#./api/Ext.window.Window ).

Answer 4

Ext.MessageBox is a singleton so you can directly override its method using below method, this method will work with ExtJS 3.2.1, not sure it will work with 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 + '".');
    }
});

Reference:

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