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进行自动化测试，那么在每个组件中添加ID /类对您来说都很困难。

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

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

2 个答案: