PDA

View Full Version : [2.1] Ext.MessageBox prompt with ComboBox



mbajema
11 Jul 2008, 9:17 AM
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.net/kb/extjs/examples/message-box/combo.htm

jdurante
15 Jan 2010, 9:02 AM
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
29 Jan 2010, 3:05 AM
I also require something similar, has anybody managed this?

Thanks

raz0r1
3 May 2010, 11:09 PM
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
21 Jun 2010, 1:45 PM
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
16 Jul 2010, 5:53 AM
I posted a 3.2.1 version here:
http://www.sencha.com/forum/showthread.php?104375-Ext.MessageBox-prompt-with-ComboBox-DateField-or-any-input-field