需要在Extjs MessageBox中的按钮上设置类/标识值

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

如果测试团队使用硒为他们的自动化测试，将IDS /在每一个组件类可能难以你们俩。

在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事件（你在默认情况下看到的只是公共成员注意，使用菜单上这个searchfield权延长本）

编辑

如果您只是为了测试目的而需要它，我会建议覆盖负责任的方法。这应该工作（未经测试！）

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