Extjs MessageBox 覆盖，因此按钮向右而不是居中对齐（Extjs 4.2）

【问题标题】：Extjs MessageBox override so buttons are aligned to right instead of center (Extjs 4.2)Extjs MessageBox 覆盖，因此按钮向右而不是居中对齐（Extjs 4.2）
【发布时间】：2017-09-01 22:34:39
【问题描述】：

我查看了 messagebox.js 源代码，发现在创建按钮的停靠工具栏时，它具有以下代码：

me.bottomTb = new Ext.toolbar.Toolbar({
        id: baseId + '-toolbar',
        ui: 'footer',
        dock: 'bottom',
        layout: {
            pack: 'center'
        },
        items: [
            me.msgButtons[0],
            me.msgButtons[1],
            me.msgButtons[2],
            me.msgButtons[3]
        ]
    });

将按钮对齐到窗口的中心。但是，为了通过我的应用程序保持一致性，我希望这些按钮与右侧对齐。我希望能够在不覆盖源代码的情况下做到这一点。我有一个消息框的覆盖文件，并试图覆盖 initComponent 函数，但到目前为止没有运气。

谢谢。

【问题讨论】：

你能覆盖上面代码中的布局吗？
我不确定如何仅访问布局。我尝试覆盖 initComponent 函数（具有布局）。但这似乎有点矫枉过正，并且有冲突的 ID
试试这个fiddle.sencha.com/#fiddle/eni&view/editor

标签： javascript extjs extjs4 extjs4.2

【解决方案1】：

通过在Ext.MessageBox 上调用getDockedItems 来获取对按钮工具栏的引用。

var buttonTb = Ext.MessageBox.getDockedItems('toolbar')[0];

然后将layout.pack 配置设置为end，按钮将出现在右侧。

buttonTb.layout.pack = "end";

更改此配置的好地方是在Ext.MessageBox 的beforerender 事件中。查看完整代码和有效的Sencha Fiddle。

Ext.MessageBox.on('beforerender', function(messageBox) {
    var buttonTb = messageBox.getDockedItems('toolbar')[0];
    buttonTb.layout.pack = "end";
});

Ext.MessageBox.show({
    title: "My aligned MessageBox",
    msg: "test",
    buttons: Ext.Msg.YES
});

【讨论】：