1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
    AdamMarshall is on a distinguished road

      0  

    Default Vertical layout for buttons in a message box

    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
    654
    Vote Rating
    26
    vadimv will become famous soon enough vadimv will become famous soon enough

      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

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    45
    Vote Rating
    4
    AdamMarshall is on a distinguished road

      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

Thread Participants: 1

Tags for this Thread