Ext学习_Window窗口3

Ext.namespace("com.deng");
/**
 * 实现Window的最小化功能
 * Window没有实现最小化功能，程序员可以根据客户和业务需求设计更加实用的最小化效果
 * 实现：
 *   在工具栏上有一个固定不变的按钮，用来创建新窗口，新创建的窗口从该按钮飞出，窗口创建后
 *   在工具栏上动态生成一个对应的按钮
 */
Ext.onReady(function(){
	var i = 1;
	var newWin = new Ext.Button({
		text: "新建窗口",
		pressed: true ,//pressed选项表示按钮处于按压状态
		handler: function(){
			var win = new Ext.Window({
				title: "窗口" + (i++),
				width: 400,
				height: 300,
				minimizable: true,
				constrainHeader: true,
				listeners:{
					minimize: function(window){
						window.hide(button.id);
						window.minimizable = false;
					},
					close:function(window){
//						var delObj = document.getElementById(button.id);
//						delObj.parentNode.parentNode.removeChild(delObj.parentNode);
						toolBar.remove(button);
					}
				}
			});
			win.show(newWin.id);
			win.getUpdater().update({url: "inner.html", scripts:true});
			
			var button = new Ext.Button({
				id: "id" + i,
				text: win.title,
				pressed: true,
				handler: function(btn){
					if(win.minimizable){
						win.hide(btn.id);
						win.minimizable = false;
					} else {
						win.show(btn.id);
						win.minimizable =true;
					}
				}
			});
			
			toolBar.addButton(button);
			toolBar.doLayout();
		}
	});
	
	var toolBar = new Ext.Toolbar({
		height: 25,
		renderTo: Ext.getBody(),
		items:[
		       newWin
		       ]
	});
	
});
/**
 * 全局的对象，每个之间就可以直接用其它的对象
 * toolBar.doLayout([Boolean value]):
 *  重新计算容器的布局尺寸。当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数
 *  （可选的）true表示只是计算该组件的布局，而子组件则有需要才自动计算（默认为false每个子容器就调用doLayout
 *  constrainHeader:
 *    true表示为将window header约束在视图中显示， false表示为允许header在视图之外的地方显示（默认为false）。
 *  listeners:
 *    这个配置很有用，能够定义一系列的事件，这样事件的管理更加集中。minimize事件在点击"最小化"按钮时触发
 */