Need to set class/id values on buttons in Extjs MessageBox

Question

Our testing team require IDs or class values to be set on the HTML elements in our message popup boxes. This is for their automated tests.

I can pass in a class value for the dialog panel by passing in a cls value like so:

                Ext.Msg.show({
                    title:'Reset Grid Layout',
                    msg: 'Are you sure that you want to reset the grid layout?',
                    cls:'Reset-Grid-Layout-Message',
                    buttons: Ext.Msg.YESNO,
                    fn: function (response) {
                        if (response == 'yes') {
                        }
                    },
                    icon: Ext.window.MessageBox.QUESTION
                });

Now we also need it on the buttons, and also on the text being displayed. Is there some way of getting a cls value onto the buttons?

I was thinking it may be possible to expand the button parameter into something like :

buttons : [{name:'but1', cls:'asdf'}, {name:'but2', cls:'asdf2'}]

But google is not giving me back anything useful.

Answer 1

If your testing team uses Selenium for their automated test, adding ids/classes in every component could be difficult for both of you.

Overriding components in Ext is a good solution, but I don't recommend this because it will affect all your components. Unless you know what you're doing.

I suggest, extend Ext.window.MessageBox and generate classes for your buttons based on your parent cls.

// Put this somewhere like /custom/messagebox.js
Ext.define('App.MyMessageBox', {
    extend: 'Ext.window.MessageBox'
    ,initConfig: function(config) {
        this.callParent(arguments);
    }
    ,makeButton: function(btnIdx) {
        var me = this;               
        var btnId = me.buttonIds[btnIdx];

        return new Ext.button.Button({
            handler: me.btnCallback
            ,cls: me.cls + '-' + btnId
            ,itemId: btnId
            ,scope: me
            ,text: me.buttonText[btnId]
            ,minWidth: 75
        });
    }
});

To use:

App.Box = new App.MyMessageBox({
    cls:'reset-grid-layout'
}).show({
    title:'Reset Grid Layout'
    ,msg: 'Are you sure that you want to reset the grid layout?'
    ,buttons: Ext.Msg.YESNO
    ,icon: Ext.window.MessageBox.QUESTION    
});

Your buttons will have reset-grid-layout-yes and reset-grid-layout-no class.

You can do the same with other components you have. Check out the Fiddle. https://fiddle.sencha.com/#fiddle/7qb