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],