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
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi