[ExtJS] Component config&event

ExtJS API

docs.sencha.com/extjs/6.5.3/modern/Ext.html

Ext | Ext JS 6.5.3

---

자주 쓰이는 Component별 config & event

 

split : 패널 사이에 마우스를 올렸을 때 크기 조절 가능

collasible : true로 두면 panel의 title부분 우측에 화살표가 생겨 접었다 폈다 할 수 있음

html : html태그를 그대로 사용하여 컴포넌트에 html 사용 가능

Ext.onReady(function(){
	
	Ext.create("Ext.container.Viewport",{
		renderTo:Ext.getBody(),
		border:true,
		layout:'border',
		items:[{
			xtype:'panel',
			region:'west',
			split:true,
			collapsible:true,
			title:'좌측입니다.',
			flex:1,
			border:true,
			html:'<b>안녕하세요</b>'
		}]
	});
});

결과1

결과2

 

 

Handler event 부여 - button

Ext.onReady(function(){
	
	Ext.create("Ext.container.Viewport",{
		renderTo:Ext.getBody(),
		
			xtype:'panel',
			layout:'border',
			flex:3,
			border:true,
			items:[{
				xtype:'panel',
				region:'north',
				flex:2,
				border:true,
				split:true,
				layout:'center',
				items:[{
					xtype:'button',
					text:'버튼',
					handler:function(btn){
						alert("click!")
					}
				}]
			}]
	});
});

결과

 

listeners : Event 여러개 부여 - jsonArray형태로 여러개 선언하기

listeners:{
	click:function(btn){
    	alert("click!");
    }
}

 

---

출처 및 참고 : kutar37.tistory.com/entry/ExtJS-%EC%9E%90%EC%A3%BC%EC%93%B0%EC%9D%B4%EB%8A%94-Component%EB%B3%84-config-event?category=778439