Question

我使用Ext.window.MeassageBox进行确认对话窗口。

代码是这样的：

deleteSomething: function( grid, row, col ) {
    var ids = [ grid.store.getAt( row ).get( 'id' ) ];

    function deleteSomething ( btn, text ) {
        if( btn === 'yes' ) {
            Ext.Ajax.request( {
                url: 'data/deleteSomething.php',
                params: {
                    'ids': Ext.encode( ids )
                },
                success: function( response ) {
                    //perform some actions
                }
            } );
        }
    }

    Ext.MessageBox.show( {
        animEl: 'elId',
        buttons: Ext.MessageBox.YESNO,
        fn: deleteSomething,
        msg: Locale.gettext( 'Are you sure you want to remove the selected thing?' ),
        title: Locale.gettext( 'Delete?' )
    } );
}

我想为消息字段应用一些css规则，并为按钮右侧对齐应用 scale：'medium'。有没有办法在没有扩展MessageBox的情况下实现它？

Answer 1

您是否尝试添加如下所示的buttons属性？

Ext.MessageBox.show({
   buttons: [
      {text: 'YES', scale: 'medium'},
      '->',
      {text: 'NO', scale: 'medium}
   ]
});

编辑：为什么我们不使用简单的window组件？

var winDelete = new Ext.Window({
    width: 300,
    modal: true,
    closeAction: false,
    title: 'Are you sure to delete this record?',
    closable: false,
    html: '<span>The selected records will remove from the list.<br/>Are you sure?</span>',
    buttons: [
        {
            text: 'YES',
            scale: 'medium',
            cls: 'btn-delete-yes',
            listeners: {
                click: function() {
                    deleteSomething();
                }
            }
        }, '->',
        {
            text: 'NO',
            scale: 'medium',
            cls: 'btn-delete-no',
            listeners: {
               click: function() {
                   winDelete.close();
               }
            }
        }
    ]
});

自定义Ext.window.MessageBox ExtJS 4

1 个答案: