Sencha Ext.tab.Panel(PC, classic)

참조

https://docs.sencha.com/extjs/7.7.0/

Docs | Ext JS 7.7.0

App 파일 구조

제목 수정

# /classic/src/view/main/Main.js
-----------------------
Ext.define('genesis.view.main.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'genesis.view.main.MainController',
        'genesis.view.main.MainModel',
        'genesis.view.main.List'
    ],
    
생략

    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
            	# MainModel의 data.name을 참조
                text: '{name}'
            },
            flex: 0
        },
        iconCls: 'fa-th-list'
    },
-----------------------   

# /app/model/view/main/MainModel.js
-----------------------   
Ext.define('genesis.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.main',

    data: {
        name: 'genesis2',

        loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
    }

    //TODO - add data, formulas and/or methods to support your view
});
-----------------------

아이콘 바꾸기(Case1)

# {app 이름}/classic/src/view/main/Main.js
-----------------------
    header: {
        layout: {
            align: 'stretchmax'
        },
        title: {
            bind: {
            	# MainModel의 data.name을 참조
                text: '{name}'
            },
            flex: 0
        },
        # before
        # iconCls: 'fa-th-list'
        # after
        iconCls: 'fa-headpones'
    },
-----------------------

# {workspace}/build/development/genesis/classic/resources/genesis-all_2.css
-----------------------
/* {workspace}/ext/packages/font-awesome/sass/etc/_icons.scss:1160 */
.fa-th-list:before {
    content: '\f00b' !important;
-----------------------

# {workspace}/ext/packages/font-awesome/sass/etc/_variables.scss
-----------------------
$fa-var-th-list: '\f00b';
-----------------------

# {workspace}/ext/packages/font-awesome/sass/etc/_variables.scss
# 해당 파일에 정의된 icon만 사용 가능(여기에 추가만 한다고 적용 안됨)
-----------------------
$fa-css-prefix:               fa !default;
$fa-version:                  "5.6.3" !default;
생략
.#{$fa-css-prefix}-th-list:before { content: @include ext-declare-fa-var($fa-var-th-list); }
-----------------------

# Font Awesome 사이트 검색
# https://fontawesome.com/
# Icons > 버전 5.15.4
# Pro는 유료라 사용 안됨

 

https://stackoverflow.com/questions/37674669/adding-a-image-in-ext-tab-panel

Adding a image in ext tab panel

아이콘 바꾸기(Case2)

# 지정된  디렉토리에 이미지 등록
{app}/resources/images/menuIcon/1.png

# Genesis.view.main.Main
{
		// img 태그를 사용
        title: '<img src="resources/images/menuIcon/1.png" style="vetical-align:middle;" width="30"> Users',
        name: 'users',
        iconCls: null,
        loader: {
			url: 'resources/tabContent.html',
			contentType: 'html',
			loadMask: true,
			loadOnRender: true
		}
}

아이콘 바꾸기(Case3)

# resources/css/style.css 
# 이미지는 해당 디렉토리에 등록되어 있어야 함
.menu-icon-1 {
    background-image: url(../images/menuIcon/1.png) !important;
    background-size: contain !important;
}

# app.json
# css 등록
    "css": [
        {
            "path": "${build.out.css.path}",
            "bundle": true,
            "exclude": ["fashion"]
        },
        // css 등록
        {
            "path": "resources/css/style.css"
        }
    ],

# Genesis.view.main.Main
{
        title: 'asfd',
        name: 'users',
        // css 적용
        iconCls: 'menu-icon-1',
        loader: {
			url: 'resources/tabContent.html',
			contentType: 'html',
			loadMask: true,
			loadOnRender: true
		}
    },

header 넓이 수정

# {app 이름}/classic/src/view/main/Main.js
-------------------------
    defaults: {
        bodyPadding: 20,
        tabConfig: {
            responsiveConfig: {
            	# 화면이 wide일때 적용됨
                wide: {
                    iconAlign: 'left',
                    textAlign: 'left',
                    # 추가
                    width: 300
                },
                # 화면이 세로일때 적용됨
                # PC에서 확인하면 버그가 있음
                tall: {
                    iconAlign: 'top',
                    textAlign: 'right',
                    width: 120
                }
            }
        }
    },
-------------------------

tab 내용을 html에서 가져오기

https://examples.sencha.com/extjs/7.7.0/examples/kitchensink/?classic#ajax-tabs

Sencha | Examples

# {app 디렉토리} 아래에 로딩할 tabContent.html 생성
----------------------
테스트입니다.
----------------------

# 함수를 이용해서는 원하는 결과가 잘 안나옴
------------------
	{
        title: 'Users',
        iconCls: 'fa-user',
        loader: {
        	# index.html은 '/'로 시작하지 않으면 못 찾음
			# url: '/index.html',
            # tabContent.html은 '/'를 붙이면 찾지 못함
            url: 'tabContent.html'
			contentType: 'html',
			loadMask: true,
			loadOnRender: true
		}
    },
------------------

tab 정보 가져오기

# TabBar 제목 가져오기
        let content = this.getContent();
        let findTitle = false;
        for(i=0; i< content.getTabBar().items.items.length; i++) {
            let tabTitle = content.getTabBar().items.items[i].title;
			console.log(tabTitle);
        }

tab 추가 및 활성화하기

            let panel = Ext.create(url, {
                title: title,
                autoShow: true,
                autoDestory: true
            });
            content.add(panel);
            content.getLayout().setActiveItem(panel);