Sencha config 사용법

2024. 3. 27. 23:22Javascript/Sencha

https://obanadingyo.tistory.com/entry/4%EC%9D%BC%EC%B0%A8-Sencha-Touch-2-views-%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4

 

4일차 : Sencha Touch 2 views 에 대한 이해!

App 에서 View 를 사용해 보자!! 사용자가 실제로 보는 부분은 view 이다. 오늘은 app 에서 어떻게 view 를 만들고 그렇게 만들어진 View 를 통해 어떻게 application 을 build 하는 지를 설명하겠다. 지난 시

obanadingyo.tistory.com

config를 사용하면, 자동으로 getter, setter가 생김(외부에서 getter, setter를 거치지 않고, 직접 핸들링도 안됨)

# {app}/app/controller/AppController.js
------------------------------
Ext.define('Genesis.controller.AppController', {
    extend: 'Ext.app.Controller',
    config: {
        test: 'aaa',
    },

    applyTest: function(value) {
        return value + 'Apply';
    },
    updateTest: function(newValue, oldValue) {
        alert(newValue +' '+ oldValue);
    }
})
------------------------------

# {app}/app/view/main/MainController.js
------------------------------
Ext.define('Genesis.view.main.MainController', {
    extend: 'Ext.app.ViewController',

    alias: 'controller.main',

	clickUserTab: function() {
    	# AppController 호출	
    	let controller = Genesis.app.getController('AppController');
       	# getter 호출
        console.log(controller.getTest());
        # setter 호출
        controller.setTest('bbbb');
    }
});
------------------------------

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

	생략
    
    items: [{
        title: 'Home',
        iconCls: 'fa-home',
        // The following grid shares a store with the classic version's grid as well!
        items: [{
            xtype: 'mainlist'
        }]
    }, {
        title: 'Users',
        name: 'users',
        iconCls: 'fa-user',
        loader: {
			url: 'resources/tabContent.html',
			contentType: 'html',
			loadMask: true,
			loadOnRender: true
		},
    }, {
        title: 'Groups',
        iconCls: 'fa-users',
        bind: {
            html: 'aa'
        },
        listeners: {
        	# MainController의 메소드 호출
            activate: 'clickUserTab',
        }
    }, {
        title: 'Settings',
        iconCls: 'fa-cog',
        bind: {
            html: '{loremIpsum}'
        }
    }],
});    
------------------------------

apply~: 값이 설정되거나, 바뀔때 호출됨, instance 생성시에도 호출됨

updae~: apply 이후에 호출됨

'Javascript > Sencha' 카테고리의 다른 글

Sencha Trouble Shooting  (0) 2024.03.30
Sencha 화면 구성  (0) 2024.03.30
Sencha 화면 전환  (0) 2024.03.23
Sencha Ext.tab.Panel(PC, classic)  (0) 2024.03.23
STS를 이용해 Sencha 프로젝트 생성  (0) 2024.03.22