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

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

概述

在前端界面开发中，对话框（Dialog）是经常使用的组件。在YUI.Ext中，也提供了对话框的组件。本文将介绍如何使用YUI.Ext的对话框组件。

Dialog组件的使用

引入Dialog组件

在使用Dialog组件前需要首先引入YUI.Ext的库文件和YUI.Ext的样式文件。可以使用下面的代码将YUI.Ext的库文件和样式文件引入到页面中：

<link rel="stylesheet" type="text/css" href="https://cdn.bootcdn.net/ajax/libs/extjs/3.4.1-precise/resources/css/ext-all.css"/>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/extjs/3.4.1-precise/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/extjs/3.4.1-precise/ext-all.js"></script>

创建Dialog实例并显示对话框

使用下面的代码创建一个Dialog实例，并显示对话框：

var dlg = new Ext.Window({
    title: 'Hello, World!',
    width: 400,
    height: 300,
    html: 'Hello, World!'
});

dlg.show();

在上面的代码中，创建了一个Dialog实例，然后使用show方法显示对话框。其中，通过title属性设置对话框的标题；通过width和height属性设置对话框的宽度和高度；通过html属性设置对话框的内容。

配置Dialog实例

Dialog实例有很多可配置的属性，下面是一些常用的属性：

• title：对话框的标题
• width：对话框的宽度
• height：对话框的高度
• modal：是否模态
• closable：是否允许关闭
• resizable：是否可调整大小
• items：对话框内的元素
• buttons：对话框中的按钮

下面是一个包含按钮和元素的对话框实例：

var dlg = new Ext.Window({
    title: 'Hello, World!',
    width: 400,
    height: 300,
    modal: true,
    closable: false,
    resizable: false,
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Name',
        name: 'name'
    },{
        xtype: 'textfield',
        fieldLabel: 'Email',
        name: 'email'
    }],
    buttons: [{
        text: 'OK',
        handler: function() {
            alert('OK button clicked');
        }
    },{
        text: 'Cancel',
        handler: function() {
            alert('Cancel button clicked');
        }
    }]
});

dlg.show();

在上面的代码中，通过modal属性设置对话框为模态对话框，这样会禁用页面的其它元素；通过closable属性设置对话框不允许关闭；通过resizable属性设置对话框不可调整大小；通过items属性设置对话框内包含了两个文本框；通过buttons属性设置对话框内包含了两个按钮。

示例说明

对话框中动态加载内容

下面的代码演示了如何在对话框中动态加载内容：

// 定义一个加载函数
function loadContent(url, callback) {
    Ext.Ajax.request({
        url: url,
        success: function(response, options) {
            if (typeof callback === 'function') {
                callback(response.responseText);
            }
        }
    });
}

// 创建对话框
var dlg = new Ext.Window({
    title: 'Dynamic Dialog',
    width: 400,
    height: 300,
    html: 'Loading...'
});

// 加载内容
loadContent('https://www.example.com/content.html', function(content) {
    dlg.update(content);
});

// 显示对话框
dlg.show();

在上面的代码中，首先定义了一个loadContent函数，使用Ext.Ajax.request发起异步请求加载指定url的内容，加载成功后通过回调函数将内容显示到对话框中。在创建对话框后，通过loadContent函数异步加载内容，并在加载成功后将内容更新到对话框中。

对话框的位置和遮罩

下面的代码演示了如何控制对话框的位置和添加遮罩：

// 创建对话框
var dlg = new Ext.Window({
    title: 'Positioned Dialog',
    width: 200,
    height: 200,
    modal: true,
    closable: false,
    resizable: false,
    html: 'Hello, World!'
});

// 显示对话框并设置位置
dlg.show();
dlg.setPosition(100, 100);

// 添加遮罩
var mask = new Ext.LoadMask(Ext.getBody(), {
    msg: 'Loading...'
});
mask.show();

// 移动对话框的位置
setTimeout(function() {
    dlg.setPosition(200, 200);
    mask.hide();
}, 2000);

在上面的代码中，首先创建了一个对话框实例，并设置了对话框不可关闭、不可调整大小和包含了一个文本框。然后使用show方法显示对话框，并使用setPosition方法设置对话框的位置。接着创建一个加载指示器遮住页面，并在2秒后移动对话框位置，并隐藏遮罩。