Sencha 화면 구성

Ext.tab.Panel: tab 좌측 표시

Ext.define('Home.view.main.Main', {
	extend: 'Ext.panel.Panel',
    xtype: 'app-main',

    requires: [
    ],

    title: 'Home',
    // tabBar가 화면 하단까지 쭉 그려지기 위해서 필요
    // tabpanel의 flex와 연계됨
    layout: {
        type: 'vbox',
    },
    items: [{
        xtype: 'tabpanel',
        // layout과 연계됨
        flex: 1,
        // tabBar가 왼쪽으로 출렬되게 함
        tabPosition: 'left',
        // tabPosition가 'left'일때, default만 아니면 됨
        // default, left, none, right
        tabRotation: 'none',
        tabBar: {
        	// item 전체에 적용
            defaults: {
                padding: 5,
            	// tabPosition: 'left'일때 tab의 width 결정
                width: 100 // Set the desired width for tabs
                height: 50,                
            }
        },
        items: [{
            title: 'aaa',
            html: 'bbb',
        }, {
            title: 'bbbb',
            html: 'cccc',
        }]
    }]
});