본문 바로가기
etc/Ext JS

[Ext Js] 04 레이아웃

by haheehee 2023. 8. 31.
728x90
  • 초기 ExtJS에서 <body> 태그 안에는 아무것도 없지만, app.js에 코드를 작성하면 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보임
  • ExtJS 컴포넌트들은 기본적으로  block 속성 (위-아래로 정렬)

1. panel

  • 레이아웃을 구성할 때 쓰이는 Container.
  • 하위 구성요소를 포함할 수 있음
  • renderTo:Ext.getBody() →어디에 보여지는지 : body안에
Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
        region: 'center',
        width: 500,
        height: 400,
        border: true,
        title: 'Hello',
        html: '<p>&nbsp;&nbsp;&nbsp;Hahee!</p>',
        renderTo:Ext.getBody()
    });
});

2. viewport

  • 화면을 가득 채우고 싶을 때 사
  • layout: fit → 반응형으로 화면 채우기
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		layout: 'fit',
		renderTo:Ext.getBody(),
		border: true,
		items:[{
			xtype: 'panel',
		},{
			xtype:Ext.create("Ext.form.field.Text")
		}]
	});
});

3. 이중 구조

Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		renderTo: Ext.getBody(),
		border: true,
		layout: 'fit',
		items:[{
			xtype: 'panel',
			title: 'Panel Example',
			items:[{
				xtype:'textfield'
			},{
				xtype:'button',
				text:'Button text'
			}]
		}]
	});
});
  • items 안에 items
  • viewport안에 panel
  • panel안에 textfield와 button

4. region, border

  • layout은 region 속성으로 제어
  • 부모 컨테이너가 layout: ‘border’를 선언해야 사용 가능
  • region 속성 : north, center, south, east, west
Ext.define('MemberApp.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    border: true,
    layout: 'border',  
    items:[{
        region: 'north',
        height: 50,
        bodyStyle: 'background-color: black',
        html: '<h2><font color="white">&nbsp;&nbsp;&nbsp;회원관리</font></h2>',
    }, {
        region: 'west',
        title: '메뉴',
        html: '메뉴',
        collapsible: true,
        width: 200
    }, {
        region: 'center',
        xtype: 'tabpanel',
        name: 'mainbar',
        items: [
        {
            title: '메뉴1',
            html: '컨텐트 위치'
        }]
    }, {
        region: 'south',
        height: 30,
        html: '도움말',
        border:true
    }],
});

5. flex

  • 반응형으로 레이아웃
  • flex: 값(숫자) → 비율 의미
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport", {
	    renderTo: Ext.getBody(),
	    border: 'true',
	    layout: 'border',
	    items: [{
	      xtype: 'panel',
	      region: 'north',
	      flex: 1,
	      title: 'north panel'
	    },{
	      xtype: 'panel',
	      region: 'center',
	      flex: 1,
	      title: 'center panel'
	    },{
	      xtype: 'panel',
	      region: 'east',
	      flex: 1,
	      title: 'east panel'
	    },{
	      xtype: 'panel',
	      region: 'west',
	      flex: 1,
	      title: 'west panel'
	    },{
	      xtype: 'panel',
	      region: 'south',
	      flex: 1,
	      title: 'south panel'
	    }]
	});
});

6. center

  • 부모panel의 layout속성에 center : 자식panel의 위치가 브라우저 화면의 가운데로 설정됨 (반응형)
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		renderTo: Ext.getBody(),
		border: true,
		layout: 'fit',
		items:[{
			xtype: 'panel',
			title: '부모패널',
			layout: 'center',
			items:[{
				xtype: 'panel',
				title: '자식패널',
				width: 500,
				height: 500,
				border: true
			}]
		}]
	});
});

7. absolute (절대좌표)

  • css의 absolute과 비슷 : 좌표를 설정하여 위치 지정
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		rederTo: Ext.getBody(),
		border: true,
		layout: 'fit',
		items:[{
			xtype: 'panel',
			title: 'Parent Pannel',
			layout: 'absolute',
			items:[{
				xtype: 'panel',
				width: 400,
				height: 400,
				x: 350,
				y: 200,
				border: true,
				title: 'First 자식'
			},{
				xtype: 'panel',
				width: 200,
				height: 200,
				x: 50,
				y: 20,
				border: true,
				title: 'Second 자식'
			}]
		}]
	});
});

8. accordion

  • jquery형태의 아코디언 스타일
  • 하나의 패널을 확대할 수 있는 확장 기능
  • 여러개의 패널 관리 가능한 레이아웃
Ext.onReady(function(){
	Ext.create("Ext.container.Viewport",{
		renderTo: Ext.getBody(),
		border: true,
		layout: 'fit',
		items:[{
			xtype: 'panel',
			title: 'Parent Pannel',
			layout: 'accordion',
			items:[{
				xtype: 'panel',
				title: 'First Child',
				html: 'First Child panel'
			},{
				xtype: 'panel',
				title: 'Second Child',
				html: 'Second Child panel'
			}]
		}]
	});
});

9. card

  • 여러 개의 자식 컴포넌트를 임의의 시점에 표시할 수 있는 레이아웃
  • 컴포넌트들이 아래로 차례로 겹쳐 있음 → 첫번째 컴포넌트만 보인다.
    • 어플리케이션에서 페이지 넘길 때 사용
    • 사진 슬라이드에 사용
    • nav bar가 고정된 좌측메뉴 일 때 클릭시 바뀔 때 사용
Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width: 500,
		heigth: 500,
		renderTo: Ext.getBody(),
		layout: 'card',
		xtype: 'panel',
		tbar:[{
			text: 'Before',
			handler: function(btn){
				if(btn.up("panel").getLayout().getPrev()){
					btn.up("panel").setActiveItem(btn.up("panel").getLayout().getPrev());
				} else{
					Ext.toast({
						html: 'First Page',
						width: 200,
						align: 't',
						closable: false
					});
				}
			}
		},{
			text: 'Next',
			handler: function(btn){
				if(btn.up("panel").getLayout().getNext()){
					btn.up("panel").setActiveItem(btn.up("panel").getLayout().getNext());
				} else{
					Ext.toast({
						html: 'Last Page',
						width: 200,
						align: 't',
						closable: false
					});
				}
			}
		}],
        
		items:[{
			title:'1page',
			html:'<h3>contents 1</h3>'
		},{
			title:'2page',
			html:'<h3>contents 2</h3>'
		},{
			title:'3page',
			html:'<h3>contents 3</h3>'
		}]	
	});
});

10. column

  • % 혹은 고정폭으로 지정 → 여러 개의 열 형식의 레이아웃 스타일
Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		title: 'Column',
		width: 600,
		height: 300,
		layout: 'column',
		renderTo: Ext.getBody(),
		items:[{
			title: 'column 1',
			columnWidth: 0.25,
			items:[{
				xtype: 'button',
				text: 'btn1'
			}]
		},{
			title: 'column 2',
			columnWidth: 0.25,
			items:[{
				xtype: 'button',
				text: 'btn2'
			}]
		},{
			title: 'column 3',
			columnWidth: 0.5,
			html: 'contents'
		}]
	});
});

11. box

  • box형의 기본 클래스
    • HBoxLayout : 수평 방향으로 자식 배치하는 레이아웃
    • VBoxLayout : 수직 방향으로 자식 배치하는 레이아웃
Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width: 500,
		height: 100,
		title: 'Layout(Horizontal)',
		renderTo: Ext.getBody(),
		layout:{
			type: 'hbox',
			align: 'stretch'
		},
		items:[{
			title: 'First',
			flex: 1,
			html: 'page 1'
		},{
			title: 'Second',
			flex: 1,
			html: 'page 2'
		},{
			title: 'Third',
			flex: 1,
			html: 'page 3'
		}]
	});
});

12. form

  • form field를 container 넓이에 맞춰 랜더링하는 레이아웃
Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width: 400,
		height: 300,
		title: 'Form layout style',
		layout: 'form',
		renderTo: Ext.getBody(),
		items:[{
			xtype: 'textfield',
			fieldLabel: 'First textfield'
		},{
			xtype: 'textfield',
			fieldLabel: 'Second textfield'
		}]
	});
});

13. table

  • html의 테이블을 랜더링하는 레이아웃
  • rowspan과 colspan 사용
Ext.onReady(function() {
	Ext.create("Ext.panel.Panel", {
		title: 'Table Layout Example',
		width: 500,
		height: 200,
		renderTo: Ext.getBody(),
		layout: {
			type: 'table',
			columns: 3
		},
		defaults: {
			bodyStyle: 'padding: 20px',
            border: true
		},
		items: [{
			html: 'first',
			rowspan: 2,
			height: 100
		},{
			html:'second',
			colspan: 2
		},{
			html:'thrid'
		},{
			html:'fourth'
		}]
	});
});

728x90
저작자표시 비영리 변경금지

'etc > Ext JS' 카테고리의 다른 글

[Ext Js] 12 MVVM 아키텍처  (0) 2023.08.31
[Ext Js] 07 위젯(그리드 & 트리) draganddrop  (0) 2023.08.31
[Ext Js] 03 Ext JS 동작의 기본  (0) 2023.08.31
[Ext Js] 02 클래스  (0) 2023.08.31
[Ext Js] 시작해보기  (0) 2023.08.30

관련글

댓글

티스토리툴바