ExtJS 4.2：Window组件的常用配置与方法

本文主要介绍了ExtJs4.2框架中Window组件的一些常用方法和属性，通过代码示例展示了如何创建和操作Window。 在ExtJs4.2中，Window是一个浮动的容器，通常用于创建弹出式对话框或窗口。Window组件具有丰富的功能，包括可配置的大小、最大化、最小化、关闭等操作。以下是一些重要的知识点： 1. **配置项解析** - `plain`: 如果设置为`true`，则窗口不显示边框，默认值为`false`。 - `resizable`: 指定窗口是否可以调整大小，默认值为`true`。 - `maximizable`: 窗口是否可最大化，默认值为`false`。 - `maximized`: 窗口是否处于最大化状态，默认值为`false`。 - `closable`: 窗口是否可关闭，默认值为`true`。 - `bodyStyle`: 设置窗口内部body区域的CSS样式，例如`bodyStyle:"padding:3px"`。 - `buttonAlign`: 指定按钮栏中按钮的对齐方式，可选值有`left`、`center`和`right`，默认为`right`。 - `closeAction`: 关闭窗口时执行的动作，可设置为`'close'`（销毁窗口）或`'hide'`（隐藏窗口），默认为`'close'`。 2. **示例代码分析** - 在`showAddPanel`函数中，创建了一个新的Window实例，设置了其模态(`modal`)、宽度、高度、内容（通过`contentEl`添加了一个IFrame）以及包含两个按钮的按钮栏。 - `modal:'true'`表示此窗口将以模态形式显示，阻止用户与背景中的其他元素交互，直到窗口被关闭。 - `buttons`数组定义了窗口底部的按钮，每个按钮都有`text`（文本显示）和`handler`（点击事件处理函数）属性。 - `handler`函数定义了按钮点击后执行的操作，例如关闭窗口（`newwin.hide();`）。 3. **操作方法** - `show`: 显示窗口，如`newwin.show(this);`。 - `hide`: 隐藏窗口，用于关闭或隐藏已显示的窗口。 - `close`: 关闭窗口，通常会触发`close`事件。 - `maximize`和`restore`: 分别用于最大化和恢复窗口大小。 4. **自定义内容** - 可以通过`items`属性将其他组件（如表单`addForm`）添加到Window中，使Window成为复杂UI的容器。 5. **事件监听** - 在Window中，可以监听`show`、`hide`和`close`事件，以便在特定操作发生时执行相应的逻辑。 6. **使用场景** - ExtJs4.2的Window组件常用于需要用户输入信息的对话框、警告提示、确认操作等场景。 通过这些知识点，开发者可以灵活地创建和控制ExtJs4.2中的窗口，满足各种UI需求。在实际开发中，还可以结合其他组件和布局，构建出更复杂的交互界面。