EXTjs常用的組件方法

知乎文章百度搜索不到 還是回到csdn把 自己搭博客又太麻煩

看了白鶴extjs視頻學習資料後整理一下

以後用的時候看看

1

選擇器時

1 btn.up()/down().屬性 參數是選擇器或者組件的xtype

2 Ext.getCmp('id').屬性

3btn.ownerct.ownerct（父類的父類——爺爺類 子類的子類應該也有 我沒查

可能是child?）

 

2組件

1 ext自帶方式

items{
 xtype:button,
 text:'123',
handle:function(btn){
}
}

2new方式[1]

new EXT.button.button{
//免寫xtype
 text:'123',
handle:function(btn){
}

3Window有用的屬性

Ext.onReady(function(){

	//Ext.create方法相當於創建一個實例對象
	Ext.create('Ext.window.Window',{
		title:'我的第一個組件,window' ,
		width:400 , 	//Number型  也可以是字符串類型  width: '90%'
		height:300 ,
		layout:'fit' ,
		constrain:true ,		//限制窗口不超出瀏覽器邊界
		modal:true ,			//設置一個模態窗口
		//plain:true ,
		icon:'js/extjs/icons/used/browser_window.png',				//字符串參數,圖片的路徑
		//iconCls:'' ,   		//CSS樣式
		x:50 ,
		y:50 ,
		autoScroll:true,		//添加滾動條
		html:'<div style=width:200px;height:200px>我是一個div</div><div style=width:200px;height:200px>我是第二個div</div>' ,
		//constrainHeader:true,	//不允許該窗口的title超出瀏覽器邊界
		renderTo:Ext.getBody()	//新創建的組件 渲染到什麼位置
	}).show();
	
	
	
	
	
	
	
	
});

 

3簡單的新建窗體

Ext.onReady(function(){

	//ex001:點擊一個按鈕 ,打開一個新的窗體 window重複創建的問題
	//第一種實現
	//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
	var btn = Ext.get('btn');		//這個元素是經過Ext包裝的一個Ext的Dom對象//alert(btn.dom.value);
	btn.on('click',function(){
		if(!Ext.getCmp('mywin')){
			Ext.create('Ext.window.Window',{
				id:'mywin' ,		//如果你給組件加了一個id  那麼這個組件就會被Ext所管理
				title:'新窗體' , 
				height:300 ,
				width:400 ,
				renderTo:Ext.getBody() //,
				//modal:true
			}).show();		
		}
	});
	
	//第二種實現
//	var win = Ext.create('Ext.window.Window',{
//				title:'新窗體' , 
//				height:300 ,
//				width:400 ,
//				renderTo:Ext.getBody() ,
//				closeAction:'hide'  //closeAction默認是destroy 
//	});
//	
//	Ext.get('btn').on('click',function(){
//			win.show();
//	});
	
	
	
	
	
	
});

4子組件的作用

Ext.onReady(function(){

	
	//ex002 : 在組件中添加子組件  ,並進行一系列針對於組件的操作
	
	//在組件中添加子組件：
//	var win = new Ext.window.Window({
//		title:"添加子組件實例" , 
//		width:'40%' ,
//		height:400 , 
//		renderTo:Ext.getBody() ,
//		draggable:false , 	//不允許拖拽
//		resizable:false , 	//不允許改變窗口大小
//		closable:false, 	//不顯示關閉按鈕
//		collapsible:true ,	//顯示摺疊按鈕
//		bodyStyle: 'background:#ffc; padding:10px;' , // 設置樣式
//		html:'我是window的內容!!' ,
//		//Ext items(array) 配置子組件的配置項
//		items:[{
//			//Ext的組件 給我們提供了一個簡單的寫法	 xtype屬性去創建組件
//			xtype:'panel',
//			width:'50%',
//			height:100 ,
//			html:'我是面板'
//		},
//		new Ext.button.Button({
//			text:'我是按鈕' , 
//			handler:function(){
//				alert('執行!!');
//			}
//		})
////		{
////			xtype:'button' , 
////			text:'我是按鈕',
////			handler:function(btn){
////				alert('我被點擊了');
////				alert(btn.text);
////			}
////		}
//		]
//		
//	});
//	win.show();	
	
	var win = new Ext.Window({
		id:'mywin' ,
		title:'操作組件的形式' ,
		width:500 , 
		height:300 , 
		renderTo:Ext.getBody() , 
		//表示在當前組件的top位置添加一個工具條
		tbar:[{			//bbar(bottom) lbar(leftbar)  rbar(rightbar)  fbar(footbar)
			text:'按鈕1' ,
			handler:function(btn){
				//組件都會有 up、down 這兩個方法(表示向上、或者向下查找) 需要的參數是組件的xtype或者是選擇器
				alert(btn.up('window').title);
			}
		},{
			text:'按鈕2' , 
			handler:function(btn){
				//最常用的方式
				alert(Ext.getCmp('mywin').title);
			}
		},{
			text:'按鈕3' ,
			handler:function(btn){
				//以上一級組件的形式去查找 OwnerCt
				//console.info(btn.ownerCt);
				alert(btn.ownerCt.ownerCt.title);
			}			
		}]		
	});
	win.show();
	
	
	
	
	
	
	
	
	
	
	
	
	
	
});

5window窗口的複雜使用

Ext.onReady(function(){

	
	//ex003:用windowGroup對象去操作多個window窗口
	var wingroup = new Ext.WindowGroup();
	for(var i = 1 ; i <=5;i++){
		var win = Ext.create('Ext.Window',{
			title:'第' + i + '個窗口' , 
			id:'win_' + i , 
			width:300 , 
			height:300 ,
			renderTo:Ext.getBody()
		});
		win.show();
		wingroup.register(win);		//把窗體對象註冊給ZindexManger
	}
	
	var btn1 = Ext.create('Ext.button.Button',{
		text:'全部隱藏' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.hideAll();		//隱藏所有被管理起來的window組件
		}
	});
	
	var btn2 = new Ext.button.Button({
		text:'全部顯示' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.each(function(cmp){
				cmp.show();
			});
		}		
	});
	
	var btn3 = new Ext.button.Button({
		text:'把第三個窗口顯示在最前端' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.bringToFront('win_3'); //把當前的組件顯示到最前端
		}		
	});	
	
	
	var btn4 = new Ext.button.Button({
		text:'把第五個窗口顯示在最末端' , 
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.sendToBack('win_5');	//把當前的組件顯示到最後
		}		
	});		
	
	
});