定制ExtJs消息框与输入框功能实现

在ExtJs中，自定义消息框是一种常用的交互元素，它提供了与用户进行简单沟通的界面，如显示提示信息、确认操作等。本文主要介绍了如何在ExtJs中创建和使用自定义消息框，以及涉及到的相关函数和参数。 首先，我们来看`Ext.MessageBox.alert`方法，这是最基础的消息框类型，用于显示简单的消息。其语法如下： ```javascript Ext.MessageBox.alert(title, message, callback, scope); ``` - `title`: 消息框的标题，用于标识对话框的主题。 - `message`: 显示在消息框中的提示内容，可以是文本字符串。 - `callback`: 当用户点击确定按钮后，ExtJs会自动调用的函数。这个回调函数通常用来处理用户的响应或执行后续操作。 - `scope`: 指定回调函数执行时的上下文（即`this`关键字指向的对象），这对于保持函数内部逻辑的清晰非常重要。 举个例子，我们定义了一个名为`ExtJsAlert`的函数，通过`onclick`事件触发该函数来弹出一个带有“提示框”标题和“这是一个提示框”消息的消息框，并在关闭后弹出一个额外的提示：“提示框关闭”。 ```javascript ExtJsAlert = function() { Ext.MessageBox.alert("提示框", "这是一个提示框", function() { alert("提示框关闭"); }); }; HTML部分则通过输入按钮触发上述功能： <input type="button" value="点击" onclick="ExtJsAlert();"/> ``` 除了`alert`，还有`Ext.MessageBox.prompt`方法，用于提示用户输入信息。它的语法如下： ```javascript Ext.MessageBox.prompt(title, message, callback, scope, multiLine); ``` - `multiLine` 参数可选，如果设置为`true`或一个数字，表示允许用户输入多行文本，或者指定一个默认的高度。 示例中，`ExtJsPrompt`函数会弹出一个带有“输入框”标题，提示用户输入名字，并在用户关闭输入框后执行回调。 总结来说，ExtJs自定义消息框提供了一种灵活的方式来控制应用程序的交互体验，通过自定义回调函数和作用域，开发者可以根据需求实现不同的功能。掌握这些基础用法，有助于在实际开发中更好地利用ExtJs进行用户界面的定制和交互设计。