[Sencha&ExtJS] ExtJS 기초.4 - Panel / toolbar 위치정렬 / Button

기본 페널(Panel)

width, height 설정한 예제

Ext.onReady(function(){
	Ext.create('Ext.Panel', {
	    width: 300,
	    height: 300,
	    renderTo: Ext.getBody()
	}); 

})

기본패널(Panel) + Title + html

title 값으로는 TEXT와 HTML이 가능하다.

html값에는 패널 안에 html이 입력됩니다.

Ext.onReady(function(){

	Ext.create('Ext.Panel', {
	    width: 300,
	    height: 300,
	    title : 'Title Configs',
	    html : 'HTML BODY PAGE<br/><h1>Html TAG</h1>',
	    renderTo: Ext.getBody()
	});
})

기본패널(Panel) + items

button과 input type='text' 형태을 구성합니다.

xtype: 'button'과 Ext.button.Button의 클래스와 동일한 컴포넌트입니다.

Ext.create('Ext.Panel', {
	    width: 300,
	    height: 300,
	    title : 'Title Configs',
	    items : [{
	    	xtype : 'button',
	    	text : 'button Component'
	    },{
	    	xtype : 'textfield'
	    }],
	    renderTo: Ext.getBody() 

});

기본패널(Panel) + COLLAPSIBLE(접을수 있는)

접히는 패널을 만드는 속성입니다.

Ext.create('Ext.Panel', {

	    width: 300,
	    height: 300,
	    title : 'Title Configs',
	    collapsible : true,
	    renderTo: Ext.getBody()
});

패널에 접히는 부분

패널(Panel) 타이틀 위치 및 툴바

hederPosition의 값에는  top / left / right / bottom 입니다.

{

     region: 'west',

     title:'4',

     html:'4 page',

     layout: 'fit',

     flex:1,

     split: true,

     collapseDirection:'left',

     headerPosition: 'right',

     collapsible: true

}

툴바 (toolbar)

도구모음의 영역은 '툴바 버튼' 및 '메뉴버튼'등이 생성가능합니다.

{

    region: 'west',

    split: true,

    collapsible: true,

    dockedItems : [{

        //items add tool bar

        xtype : 'toolbar',

        // sub items buttons

        items : [{

            xtype : 'button',

            text :'copy'

        },{

            xtype : 'button',

            text :'cut'

        },{

            xtype : 'button',

            text :'paste'

        }]

    }]

}

툴바 메뉴 2가지 타입( classic / neptune)

툴바 위치 변경

타이틀처럼 configs속성에 

dock속성값에 top / left / right / bottom 이 올 수 있습니다.

{

    region: 'west',

    title:'4',

    html:'4 page',

    layout: 'fit',

    flex:1,

    split: true,

    collapseDirection:'left',

    collapsible: true,

    dockedItems : [{

        //items add tool bar

        xtype : 'toolbar',

        dock: 'right',

        // sub items buttons

        items : [{

            xtype : 'button',

            text :'copy'

        },{

            xtype : 'button',

            text :'cut'

        },{

            xtype : 'button',

            text :'paste'

        }]

    }]

}

오른쪽에 메뉴 추가한 내용

위치 속성 (tbar / lbar / rbar / bbar / fbar)

dockedItems 대신에,  

tbar / lbar / rbar / bbar / fbar 속성(configs)으로도 위치 변경 가능 (fbar: 툴바가 아래 오른쪽 정렬 )

(장점: 3 Depth {}에서 2 Depth로 소스가 간소화 된다.)

{

    region: 'west',

    title:'4',

    html:'4 page',

    split: true,

    collapseDirection:'left',

    collapsible: true,

   //POSITION: right 위치 (dockedItems부분이 변경)

    rbar : [{

            xtype : 'button',

            text :'copy'

        },{

            xtype : 'button',

            text :'cut'

        },{

            xtype : 'button',

            text :'paste'

    }]

}

아래 예제는 fbar입니다.

---

ExtJS의 버튼들

기본 / 토글 / 메뉴 / 분할된 메뉴 / 그룹 / 크기별 버튼

Ext.onReady(function(){

    Ext.create('Ext.Panel', {

        width: 480,

        height: 200,

        layout: {

            type: 'hbox',

            align: 'center',

            pack : 'center'

        },

// 상단 툴바(TOP)

        tbar : [

            // 1. DEFAULT BUTTON Component

            {

                xtype : 'button',

                text : 'default button'

            },

            // 2. Toggle Button - enableToggle: true

            {

                xtype : 'button',

                enableToggle: true,

                text : 'toggle button'

            },

            // 3. Menu Button - configs menu - Json Array

            {

                xtype : 'button',

                text : 'menu button',

                menu : [{

                    text : 'menu1'

                },{

                    text : 'menu2'

                },{

                    text : 'menu3'

                }]

            },

            // 4. Split Button(Menu) - configs menu - Json Array

            {

                xtype : 'splitbutton',

                text : 'split button',

                menu : [{

                    text : 'split1'

                },{

                    text : 'split2'

                },{

                    text : 'split3'

                }]

         }],

       // 본문 영역 ( scale: small / medium / large )

        items : [

            // Button Small Size

            {

                xtype : 'button',

                text : 'small',

                scale : 'small'

            },

            // Button Midium Size

            {

                xtype : 'button',

                text : 'midium',

                scale : 'medium'

            },

            // Button Large Size

            {

                xtype : 'button',

                text : 'large',

                scale : 'large'

         }],

       // 하단 툴바 (오른쪽)

        fbar : [

            // 5. Group Button

            {

                xtype: 'segmentedbutton',

                items: [{

                    xtype : 'button',

                    text: 'group1'

                }, {

                    xtype : 'button',

                    text: 'group2'

                }, {

                    xtype : 'button',

                    text: 'group3'

                }]

            },

            // 6. Group Toggle Button - allowMultiple: true

            {

                xtype: 'segmentedbutton',

                allowMultiple: true,

                items: [{

                    xtype : 'button',

                    text: 'group toggle1'

                }, {

                    xtype : 'button',

                    text: 'group toggle2'

                }, {

                    xtype : 'button',

                    text: 'group toggle3'

                }]

        }],

        renderTo: Ext.getBody()

    });

})

[ tbar / item / fbar로 구성한 예제 ]

출처: http://mongodev.tistory.com/11