Results 1 to 8 of 8

Thread: Ext.MessageBox prompt with ComboBox, DateField or any input field

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2008
    Posts
    52

    Default Ext.MessageBox prompt with ComboBox, DateField or any input field

    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:

    Code:
            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:

    Code:
    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

    Code:
    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 + '".');
        }
    });
    Mark Bajema
    Youth Mentoring Software from Innovative Mentoring

  2. #2
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    327

    Default

    thanx mbajema for your work and share..

  3. #3
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    ^^^


  4. #4
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Quote Originally Posted by mschwartz View Post
    ^^^


  5. #5
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default


  6. #6
    Sencha User sosy's Avatar
    Join Date
    Jun 2010
    Location
    Bremen, but Dutch origin
    Posts
    64

    Default

    Tell me Mschwartz & Jgarcia what am i missing?
    I prefer an sister in the red-light district, to an brother with internet explorer..

  7. #7
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    Quote Originally Posted by sosy View Post
    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.

  8. #8

    Default Date field is not showing

    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

Similar Threads

  1. set initial value to MessageBox.prompt field
    By pepgrifell in forum Ext GWT: Help & Discussion (1.x)
    Replies: 4
    Last Post: 24 Apr 2012, 4:40 AM
  2. [2.1] Ext.MessageBox prompt with ComboBox
    By mbajema in forum Ext 2.x: User Extensions and Plugins
    Replies: 5
    Last Post: 16 Jul 2010, 5:53 AM
  3. I need a password input dialog box like Ext.MessageBox.prompt
    By lyg73 in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 1 Nov 2007, 9:52 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •