[2.1] Ext.MessageBox prompt with ComboBox

[mbajema]

I made a few simple changes to Ext.MessageBox.js to support prompting the user with a combobox rather than the standard input/textarea options.

I only updated the show method as shown here (EDITED):

        show : function(options){
            if (this.combo) this.combo.destroy(); //destroy combo 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.combo ? true : false);
            if(opt.prompt){
                if(opt.multiline){
                    textboxEl.hide();
                    textareaEl.show();
                    textareaEl.setHeight(typeof opt.multiline == "number" ?
                        opt.multiline : this.defaultTextHeight);
                    activeTextEl = textareaEl;
                }else if (opt.combo){
                    textboxEl.hide();
                    textareaEl.hide();
                    this.combo = new Ext.form.ComboBox(Ext.apply(opt.comboConfig, {renderTo: bodyEl, value: opt.value || ""}));
                    activeTextEl = this.combo;
                    activeTextEl.dom = {};
                    activeTextEl.on('select', function(cb) {
                        activeTextEl.dom.value = cb.getValue();
                    });
                }
            }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(opt.icon);
            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);
                d.show(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});

            if(opt.wait === true){
                progressBar.wait(opt.waitConfig);
            }
            return this;
        },

Example:

Ext.onReady(function()
{
    Ext.QuickTips.init();

    var store = new Ext.data.SimpleStore({
        fields: ['choice'],
        data: [['choice 1'],['choice 2'],['choice 3']]
    });

    Ext.Msg.show({
        title: 'Choose',
        msg: 'Which one?',
        value: 'choice 2',
        buttons: Ext.MessageBox.OKCANCEL,
        combo: true,
        comboConfig:
        {
            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 + '".');
        }
    });
});

Demo:
http://www.innovativetechsolutions.n...-box/combo.htm

[jdurante]

Digging up an old thread here, but I have a need for something like this.

However, I am using Ext 3.1. I have tried to update my Ext.MessageBox.js show method with these changes, but it does not work properly (ComboBox is not shown).

Does anyone know how I can make this work or an alternative way of prompting the user with a combobox?

Help is much appreciated!

Thanks!

[paulyb263]

I also require something similar, has anybody managed this?

Thanks

[raz0r1]

It would be very nice if this functionality is added in one of the next versions.
since it was added you can use a simple ext.window with a combobox und buttons you want. you have to write more code but it works.

[stinkycheeseman]

It would be very nice if this functionality is added in one of the next versions.
since it was added you can use a simple ext.window with a combobox und buttons you want. you have to write more code but it works.

Thanks raz0r1! The window trick worked for me :-)

[mbajema]

I posted a 3.2.1 version here:
http://www.sencha.com/forum/showthre...ny-input-field