Ext窗体创建

一、通过Ext.window.Window直接创建并显示

	Ext.create('Ext.window.Window', {
		title:"my first window",
		height:300,
		width:500,
		constrain:true, //	不超出浏览器边界
		modal:true, //	模态窗口
		icon:"../../js/extjs/icons/used/browser_window.png",
		x:300,
		y:200,
		autoScroll:true, //	添加滚动条
		html:'<div style="width:200px;height:200px">div content</div><div style="width:200px;height:200px">div content</div>',
		renderTo:Ext.getBody()
	}).show();

二、通过点击事件创建

	//	创建窗体：点击事件，创建之前先判断窗体是否已存在
	var btn = Ext.get("btn");
	btn.on("click", function() {
		//	创建之前先判断是否已经存在当前窗体
		if(!Ext.getCmp("mywin")){
			Ext.create("Ext.window.Window", {
				id:"mywin", //	当为组件添加ID属性时，该组件会由Ext管理
				title:"属性",
				width:400,
				height:300,
				//modal:true, //	设置为模态，则只能点击一次
				renderTo:Ext.getBody()
			}).show();
		}
	});

三、先创建后控制其显示

	//	创建窗体：先创建窗体，再控制其显示
	var win = Ext.create("Ext.window.Window",{
		id:"mywind",
		title:"属性",
		width:400,
		height:300,
		closeAction:'hide'
	});
	
	Ext.get("btn").on("click", function() {
		win.show();
	});

四、通过WinGroup管理多个窗口

	// 通过WindowGroup管理多个窗体
 	var winGroup = new Ext.WindowGroup();
 	
 	for(var index=0; index<5; index++){
 		var win = Ext.create('Ext.Window',{
 			title:'第'+index+'个窗体',
 			id:'win_'+index,
 			width:500,
 			height:400,
 			renderTo:Ext.getBody()
 		});
 		
 		win.show();
 		
 		// 把窗体对象注册给ZIndexManager
 		winGroup.register(win);
 	}
 	
 	// 创建一个按钮
 	var btnHide = Ext.create("Ext.button.Button",{
 		text:'全部隐藏',
 		renderTo:Ext.getBody(),
 		handler:function(){
 			winGroup.hideAll();
 		}
 	});
 	
 	var btnShow = Ext.create("Ext.button.Button",{
 		text:'全部显示',
 		renderTo:Ext.getBody(),
 		handler:function(){
 			winGroup.each(function(cmp){
 				cmp.show();
 			});
 		}
 	});
 	
 	var btnShowIndex = Ext.create("Ext.button.Button",{
 		text:'把第3个窗口显示在最前端',
 		renderTo:Ext.getBody(),
 		handler:function(){
 			winGroup.bringToFront('win_3');
 		}
 	});

五、在组件中添加子组件

//	在组件中添加子组件
	var win = new Ext.window.Window({
		title:"添加子组件",
		width:'40%',
		height:400,
		renderTo:Ext.getBody(),
		draggable:false,	// 是否可拖拽
		resizable:false,	// 是否允许改变窗口大小
		closable:false,  	// 不显示关闭按钮
		bodyStyle:"background:#ffc;padding:10px",	//	设置窗口body样式
		html:"this is content",
		items: [
		/*new Ext.button.Button({
			text:"确定",
			handler:function(btn){
				alert(btn.text);
			}
		})*/
		{	xtype:'button',
			text:'确定',
			handler:function(btn){
				alert(btn.text);
			}
		}, 
		{
			xtype:'panel',
			width:'100%',
			height:200,
			html:'<a href="#">我是面板</a>'
		}]
	});
	
	win.show();

	var win = new Ext.Window({
		id:'mywin',
		title:'我的窗口标题',
		width:500,
		height:300,
		renderTo:Ext.getBody(),
		// 添加工具条  bbar(bottom) tbar(top) lbar(left) rbar(right) fbar(footbar)
		bbar:[
			{
				text:'按钮1',
				handler:function(btn){
					// 组件都会有up和down两个方法，用于向上和向下查找组件，可以根据xtype或选择器进行查找
					console.log(btn.up('tbar'));
					alert(btn.up('window').title);
				}
			},{
				text:'按钮2',
				handler:function(btn){
					// 根据组件ID获取相应的组件
					alert(Ext.getCmp('mywin').width);
				}
			},{
				text:'按钮3',
				handler:function(btn){
					// ownerCt : the Component's owner Container
					console.log(btn.ownerCt);// xtype:toolbar
					console.log(btn.ownerCt.ownerCt);//id:mywin
					alert(btn.ownerCt.ownerCt.title);
					
					
				}
			}
		]
	});
	
	win.show();