PDA

View Full Version : Ext.MessageBox prompt with ComboBox, DateField or any input field



mbajema
15 Jul 2010, 6:07 PM
I had posted a thread in the 2.0 forums regarding how to modify the Ext.MessageBox component to support combo boxes. I finally had this need again (for 3.2.1). However, this time I implemented it to work with basically any input field (I have used it with a custom ComboBox class as well as Ext.DateField. Unfortunately, the show() method cannot be overridden in the normal way, so I just make a copy of the class and change the show() method as such:



show : function(options){
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;
},
Sample usage:



Ext.Msg.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 + '".');
}
});
or



Ext.Msg.show({
title: 'Choose',
msg: 'Which one?',
buttons: Ext.MessageBox.OKCANCEL,
inputField: new IMS.form.DateField(),
fn: function(buttonId, text) {
if (buttonId == 'ok')
Ext.Msg.alert('Your Choice', 'You chose: "' + text + '".');
}
});

talha06
16 Jul 2010, 11:57 PM
thanx mbajema for your work and share..

mschwartz
20 Jul 2010, 5:40 AM
^^^

http://treesflowersbirds.files.wordpress.com/2009/05/spam.jpg

jay@moduscreate.com
21 Jul 2010, 7:29 AM
^^^

http://treesflowersbirds.files.wordpress.com/2009/05/spam.jpg

http://images.mylot.com/userImages/images/postphotos/2151558.gif

mschwartz
23 Jul 2010, 5:27 AM
http://2.bp.blogspot.com/_QTA4z9i9CAQ/S3OPqxSFtVI/AAAAAAAABPw/3kyuZleBd90/s1600/SpamFail.jpg

sosy
24 Jul 2010, 9:16 PM
Tell me Mschwartz & Jgarcia what am i missing?

mschwartz
26 Jul 2010, 5:28 AM
Tell me Mschwartz & Jgarcia what am i missing?

Some spammer joined the forum and posted a meaningless one line post. His signature had a link in it to some spam (and potentially dangerous) site.

I pointed it out to the mods and jgarcia deleted it.

code_expert
1 Sep 2011, 9:20 AM
Hi there,

Thanks for your post. I tried to do as you said in your post but I can't get the date field to be displayed. Is there anything that I am missing since I am a newb to extj? I copied your changes to the messagebox.js of the extjs and used the datefield example in my code.

Thanks,
Shannon