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();

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();

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

//复杂布局
//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],