[ExtJS] window component / tap panel

Ext.window.Window

응용 프로그램 창으로 사용하기위한 특수 패널이다.

창을 최대화하여 뷰포트를 채우거나 이전 크기로 복원할 수 있다.

Windows를 Ext.ZIndexManager에 연결하거나 Ext.WindowManager로 관리하여 그룹화, 활성화, 전면, 후면 및 기타 응용프로그램 별 동작을 제공할 수 있다.

기본적으로 Windows는 document.body로 렌더링되는데, 다른 요소로 제한하려면 renderTo를 지정한다.

모든 Ext.container.Container와 마찬가지로 Window가 자식 컴포넌트의 크기를 조정하고 배열하는 방법을 고려하는 것이 중요하다.

docs.sencha.com/extjs/6.5.3/classic/Ext.window.Window.html

Ext.window.Window | Ext JS 6.5.3

 

1) 선언

Ext.onReady(function(){
	var win = Ext.create("Ext.window.Window");
	win.show();
});

결과

 

autoshow : 선언을 해놓고 필요한 곳에서 불러오기 / 기본값 : false

Ext.onReady(function(){
	var win = Ext.create("Ext.window.Window");
	autoshow:true;
});

 

2) 사용

Ext.onReady(function(){
	
	Ext.create("Ext.window.Window",{
		autoShow:true,
		width:300,
		height:300,
		title:'window title',
		items:[{
			xtype:'button',
			text:'버튼'
		}]
	});
});    

결과

 

3) 속성

 - modal 

    boolean속성을 주면 창이 띄워졌을 때, 창을 제외한 바깥이 비활성화된다. 안드로이드의 modal과 흡사하다.

Ext.onReady(function(){
	
	Ext.create("Ext.panel.Panel",{
		width:300,
		height:300,
		border:true,
		renderTo:Ext.getBody(),
		items:[{
			xtype:'button',
			text:'패널버튼'
		}]
	});
	
	Ext.create("Ext.window.Window",{
		autoShow:true,
		width:300,
		height:300,
		title:'window title',
		modal:true,
		items:[{
			xtype:'button',
			text:'버튼'
		}]
	});
});    

결과

 

- resizable

    boolean속성으로 크기 조절이 가능/불가능하게 할 것인지 제어한다.

 

- 크기의 제한 (minWidth, minHeight, maxWidth, maxHeight)

    number값으로 크기를 제어한다.

 

- closable

    boolean속성을 사용해 창 우측의 종료버튼을 없앨 수 있다. 기본 값 :  ture

 

- maximizable

   boolean속성을 사용해 창 최대화 버튼을 활성성화 할 수 있다.

Ext.onReady(function(){
	Ext.create("Ext.window.Window",{
		autoShow:true,
		width:300,
		height:300,
		title:'window title',
		modal:true,
		closable:false,
		maximizable:true,
		items:[{
			xtype:'button',
			text:'버튼'
		}]
	});
});    

결과 - 종료버튼 없애고 최대화 버튼 활성화

 

4) handler 사용

 보통 특정 이벤트가 발생하면 handler를 사용하여 window창이 뜨게 한다.

Ext.onReady(function(){
	
	Ext.create("Ext.panel.Panel",{
		width:300,
		height:300,
		border:true,
		renderTo:Ext.getBody(),
		items:[{
			xtype:'button',
			text:'패널버튼',
			handler:function(btn){
				var win = Ext.create("Ext.window.Window",{
					width:300,
					height:300,
					title:'window title',
					modal:true,
					items:[{
						xtype:'button',
						text:'버튼'
					}]
				});
				win.show();
			}
		}]
	});
});    

결과

---

Ext.tab.Panel

기본 탭 컨테이너로 Dock레이아웃을 사용하여 위젯 상단에 Ext.tab.Bar를 배치한다.

TabPanel에 추가된 패널은 탭이 패널의 구성된 제목과 아이콘을 자동 사용하므로 기본적으로 헤더가 숨겨진다.

Ext.layout.container.Car와 세트로 같이 쓰인다.

Ext.tab.Panel로 선언하고 alias는 tabpanel이다.

docs.sencha.com/extjs/6.5.3/classic/Ext.tab.Panel.html

Ext.tab.Panel | Ext JS 6.5.3

 

Ext.onReady(function(){
	
	Ext.create("Ext.tab.Panel",{
		width:400,
		height:400,
		renderTo:Ext.getBody(),
		items:[{
			xtype:'panel',
			title:'tap1'
		},{
			xtype:'panel',
			title:'tap2'
		},{
			xtype:'panel',
			title:'tap3'
		},{
			xtype:'panel',
			title:'tap4'
		}]
	});
});    

결과

 

tabPosition 속성을 이용해 탭의 위치를 변경할 수 있다. left / right / bottom

 

---

출처 및 참고 : kutar37.tistory.com/entry/ExtJS-Window-Component-Tap-Panel?category=778439