Results 1 to 3 of 3

Thread: Vertical layout for buttons in a message box

  1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
      0  

    Default Vertical layout for buttons in a message box

    Hi,

    I have a custom message box that I am currently displaying using Ext.Msg.show(...)

    There are 3 buttons, which are quite wordy, so I'd like to display them on top of each other (type: 'vbox') and stretched to fill the full width of the message (align: 'stretch').

    If I manually edit the classes of the elements this looks great. However I am not sure how to set this in code?

    I have tried calling

    Code:
    Ext.Msg.setLayout({
        type: 'vbox',
        align: 'stretch'
    });
    but this seems to be for the overall message box rather than just the part with the buttons in.

    Any ideas?

    Thanks,
    Adam

  2. #2
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    722
    Vote Rating
    52
      1  

    Default

    Ext.Msg is a singleton, you know how a singleton works, right ? be carefully with changing configs because they spread on entire app, where you use it.

    You should use an Ext.MessageBox and change the layout to the me.buttonsToolbar trough overriding updateButtons. Would be something like this:

    Code:
    Ext.define('MyMessageBox', {
        extend: 'Ext.MessageBox',
    
    
        config: {
            message: "Custom messagebox with vbox layout",
            buttons : [{
                text: 'one'
            },{
                text: 'two'
            },{
                text: 'three'
            }]
        },
        updateButtons: function(newButtons) {
            var me = this;
    
    
            // If there are no new buttons or it is an empty array, set newButtons
            // to false
            newButtons = (!newButtons || newButtons.length === 0) ? false : newButtons;
    
    
            if (newButtons) {
                if (me.buttonsToolbar) {
                    me.buttonsToolbar.show();
                    me.buttonsToolbar.removeAll();
                    me.buttonsToolbar.setItems(newButtons);
                } else {
                    me.buttonsToolbar = Ext.create('Ext.Toolbar', {
                        docked     : 'bottom',
                        defaultType: 'button',
                        layout     : {
                            type: 'vbox',
                            pack: 'center',
                            align: 'stretch'
                        },
                        ui         : me.getUi(),
                        cls        : me.getBaseCls() + '-buttons',
                        items      : newButtons
                    });
    
    
                    me.add(me.buttonsToolbar);
                }
            } else if (me.buttonsToolbar) {
                me.buttonsToolbar.hide();
            }
        }
    });
    Alternatively you can use Ext.Sheet.
    Last edited by vadimv; 2 Jul 2013 at 10:59 AM. Reason: added example
    Github https://github.com/vadimpopa
    Sencha tips and articles : http://vadimpopa.com
    Twitter: @vadimvpopa

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
      0  

    Default

    Thanks for your response.

    I understood that Ext.Msg is a singleton, and was planning to set the layout back to the default once I had used it. However your solution looks good I will give it a go. Thank you

Tags for this Thread

Posting Permissions

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