EXTJS 窗口Ext.Window()学习笔记

1、窗口的基本属性

 var win = new Ext.Window({
        layout:'fit', //窗口的布局类型，fit表示布局布满整个窗口
        width:500,  //窗口大小
        height:300,
        closeAction:'hide',//控制用户单击右上角的关闭，默认为close，会在关闭窗口时把窗口对象销毁，就不能使用show()函数显示窗口了！
  	closable:false,    //如果不想使窗口关闭，设置为
 	 draggable:true,  //不可任意拖动窗口位置
  	items:[{}],   //
        buttons: [{
            text:'按钮'  //窗口下端的按钮
        }],
  	maximizable:true, //最大化
  	minimizable:true, //最小化--单击并不会触发任何操作，我们可以监听minimize事件或重写minimize()函数.
  	constrain:false, //保证整个窗口不会超过浏览器的边界
  	constrainHeader:true, //只保证窗口的顶部不超过浏览器的边界
 });
 	win.show();

2、往窗口中添加
(1)、将上一篇的grid加入items中，即在window中加入一个Panel

 var win = new Ext.Window({
        layout:'fit',	//窗口的布局类型，fit表示布局布满整个窗口
        width:500,		//窗口大小
        height:300,
        closeAction:'hide',//控制用户单击右上角的关闭，默认为close，会在关闭窗口时把窗口对象销毁，就不能使用show()函数显示窗口了！
		closable:true,				//如果不想使窗口关闭，设置为false
		draggable:true,		//不可任意拖动窗口位置
		items:[grid],			//
        buttons: [{
            text:'按钮'		//窗口下端的按钮
        }],
		maximizable:true,	//最大化
		minimizable:true,	//最小化--单击并不会触发任何操作，我们可以监听minimize事件或重写minimize()函数.
		constrain:false,	//保证整个窗口不会超过浏览器的边界
		constrainHeader:true, //只保证窗口的顶部不超过浏览器的边界
    });
    win.show();

(2)、加入form表单，只是将上边的items中的grid改成form

	var form = new Ext.form.FormPanel({
		labelAlign:'right',
		labelWidth:50,
		frame:true,
		defaultType:'textfield',
		items:[{
			fieldLabel:'文本',
			name:'text'
			},{
			fieldLabel:'日期',
			name:'data',
			xtype:'datefield'
			}]
	});

(3)、复杂布局

//复杂布局
	//1、窗口的复杂布局
	var tabs = new Ext.TabPanel({
		region:'center',//布局在中间
		margins:'3 3 3 0',
		activeTab:0,
		defaults:{autoScroll:true},
		items:[{
			   title:'默认',
			   html:'内容'
			},{
			   title:'标签',
			   html:'内容'
			},{
			   title:'可关闭',
			   html:'内容',
			   closable:true
			}]
	});
	//导航界面
	var nav=new Ext.Panel({
		title:'导航',
		region:'left',//布局
		split:true,
		width:200,
		collapsible:true,
		margins:'3 0 3 3',
		cmargins:'3 3 3 3'
	});
	

Ext.Window中--------items:[nav,tabs],