需要在 Extjs MessageBox 中的按钮上设置 class/id 值

Question

我们的测试团队要求在我们的消息弹出框中的 HTML 元素上设置 ID 或类值。这是为了他们的自动化测试。

我可以通过传入一个 cls 值来为对话框面板传入一个类值，如下所示：

                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
                });

现在我们还需要在按钮上以及正在显示的文本上使用它。有没有办法在按钮上获得 cls 值？

我在想也许可以将按钮参数扩展成类似的东西：

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

但谷歌并没有给我任何有用的东西。

Answer 1

如果您的测试团队使用 Selenium 进行自动化测试，那么在每个组件中添加 ids/classes 对你们俩来说可能都很困难。

在 Ext 中覆盖组件是一个很好的解决方案，但我不推荐这样做，因为它会影响您的所有组件。除非你知道自己在做什么。

我建议，扩展 Ext.window.MessageBox 并根据您的父 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
        });
    }
});

使用方法：

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    
});

您的按钮将具有 reset-grid-layout-yes 和 reset-grid-layout-no 类。

您可以对您拥有的其他组件执行相同的操作。看看小提琴。 https://fiddle.sencha.com/#fiddle/7qb

Answer 2

您应该参考API

cls : String 应用于按钮主元素的 CSS 类字符串。

覆盖：Ext.AbstractComponent.cls

您也可以使用右侧的过滤器（不是右上角的过滤器）。只需输入cls，您就会看到所有包含cls 的属性、方法和事件（请注意，默认情况下您只看到公共成员，请使用此搜索字段右侧的菜单来扩展它）

编辑

如果您只是出于测试目的需要它，我建议您重写负责的方法。这应该可以工作（未经测试！）

Ext.window.MessageBox.override({
    buttonClasses: [
        'okCls', 'yesCls', 'noCls', 'cancelCls'
    ],

    makeButton: function(btnIdx) {
        var btnId = this.buttonIds[btnIdx];
        var btnCls = this.buttonClasses[btnIdx];
        return new Ext.button.Button({
            handler: this.btnCallback,
            cls: btnCls,
            itemId: btnId,
            scope: this,
            text: this.buttonText[btnId],
            minWidth: 75
        });
    }
});