设置EXtjs中MessageBox的内容居中

最新推荐文章于 2023-02-01 10:40:48 发布

原创最新推荐文章于 2023-02-01 10:40:48 发布 · 4.7k 阅读

CC 4.0 BY-SA版权

文章标签：

4 篇文章

订阅专栏

本文介绍了使用Extjs框架时如何调整消息框的显示样式，包括实现内容居中、简化长文本显示等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在使用Extjs框架进行开发过程发现,使用类似如下弹出消息框时候"提示内容"靠左:

Ext.Msg.alert('标题','提示内容',function(){});

效果如下

2.为了界面的美观,可能客户会提出要求内容居中的效果,可调整为:

Ext.Msg.alert('标题','提示内容',function(){})
    .getEl().dom.children[1].querySelector('div table').align="center"

效果如下:

3.当然,在提示内容字数长度达到默认窗口一部分长度时,则并无影响:

Ext.Msg.alert('系统消息','恭喜你成功预定了小米5,请在24小时内完成付款',function(){});

效果如下:

4.如果,字数没有那么多,又不想加一段js代码,可以选择使用如下方法降低字数:

Ext.Msg.show({
    title:'系统消息',
    msg:'请填写带*的必填项',
    buttons:Ext.Msg.OK,
    icon:Ext.Msg.INFO
});

效果如下:

5.另外,在偶然的情况下,如下方法,也会居中,大致操作为多次弹框,然后弹出其他的消息框,再次弹出该消息框,弹出窗口自动变小,并居中,原因未知,代码如下:

Ext.Msg.alert('上传成功!',o.result.resultMsg);

效果一:

执行上传->提示框->删除->确认删除->上传

出现效果二:

代码复杂,不便整合,只是又是一个未知原因了,也希望大神们讨论指导下.