实用ExtJS教程100例-007:ExtJS中Window组件最小化

时间:2022-09-25 17:06:48

在上一节中我们演示了如何使用ExtJS的Window组件,这篇内容中我们来演示一下如何将窗口最小化。

要让ExtJS标题栏中显示最小化按钮并不麻烦,只需要设置 minimizable: true 即可。但是显示了最小化按钮,点击的时候却没有任何反应。这是因为ExtJS没有处理最小化事件,需要我们自己来定义最小化按钮被点击时的操作。

Ext.onReady(function () {
var g_win = Ext.create("Ext.window.Window", {
title: "标题 - www.qeefee.com",
height: 200,
width: 400,
layout: "fit",
modal: true,
closable: false,
minimizable: true,
animateTarget: "btn1",
listeners: {
minimize: function

() { var me = this

;
me.hide();
}
},
html: "<h2>最小化窗口演示</h2>"
}); Ext.get("btn1").on("click", function () {
g_win.show(); //显示窗口
});
});

要想将窗口最小化,需要处理最小化事件。上面标记的代码就是为window添加最小化事件,处理方法是将窗口隐藏。

当按钮“显示窗口”被点击的时候,窗口会被打开,当点击最小化按钮的时候,窗口被隐藏