学习YUI.Ext 第四天–对话框Dialog的使用

学习YUI.Ext 第四天--对话框Dialog的使用

YUI.Ext的对话框（Dialog）是一个常用的UI组件，用于展示弹窗，并可通过配置来进行自定义。本文将详细讲解Dialog的使用。

基础使用

创建一个空的Dialog

Dialog的基本使用非常简单，只需要创建一个空的Dialog并显示即可。

const dialog = new Ext.Window({
    title: '这是一个空的Dialog'
});
dialog.show();

其中title属性为Dialog的标题，show()方法用于显示Dialog。此时，由于Dialog没有任何内容，因此只会显示一个空白的弹窗。

在Dialog中添加内容

可以通过设置html或contentEl属性来添加内容。html属性可以直接设置HTML内容，contentEl属性则设置一个DOM元素作为内容。

const dialog = new Ext.Window({
    title: '这是一个带内容的Dialog',
    html: '<p>这是Dialog的内容</p>'
});
dialog.show();

或者：

const dialog = new Ext.Window({
    title: '这是一个带内容的Dialog',
    contentEl: 'dialog-content'
});
dialog.show();

其中contentEl属性指定的DOM元素的id为dialog-content。

更多配置

Dialog还有很多其他可配置的选项，例如：

• width和height：宽度和高度。
• resizable：是否允许调整大小。
• modal：是否是模态对话框。
• buttonAlign：按钮布局的位置。
• buttons：自定义按钮。

可以根据需要进行选择和配置。

示例

以下是两个Dialog的示例，演示如何创建一个带有按钮的对话框以及一个模态对话框。

创建带有按钮的Dialog

const dialog = new Ext.Window({
    title: '带按钮的Dialog',
    html: '<p>这是Dialog的内容</p>',
    width: 400,
    height: 200,
    resizable: false,
    modal: true,
    buttons: [
        {
            text: '确定',
            handler: function () {
                Ext.Msg.alert('提示', '您点击了确定按钮');
                dialog.close();
            }
        },
        {
            text: '取消',
            handler: function () {
                Ext.Msg.alert('提示', '您点击了取消按钮');
                dialog.close();
            }
        }
    ]
});
dialog.show();

在上面的示例中，我们创建了一个带有确定和取消按钮的Dialog。当用户点击任何一个按钮时，都会弹出一个提示框，并关闭Dialog。

创建模态Dialog

const dialog = new Ext.Window({
    title: '模态Dialog',
    html: '<p>这是Dialog的内容</p>',
    width: 400,
    height: 200,
    modal: true
});
dialog.show();

在上面的示例中，我们创建了一个模态Dialog，即用户只能操作弹窗，无法操作弹窗背后的页面。