HW4 : Sencha Touch 2 Grid 버튼을 가지는 custom Panel define 하기

지난 HW3 에서 우리는, define 을 사용하면 기존의 class 를 상속하여 우리만의 새로운 panel 을 만들 수 있다는 것을 배웠습니다.

지난 시간에 배운 Ext.define 을 사용하고, 오늘 배운 layout 을 사용하여, 격자 모양의 버튼을 배치하는 class 를 새로 만듭니다.

이 때 새로 추가 되는 config 속성은 row 와 col 입니다. 

기본 row 와 col 값은 3 으로 줍니다.

해당 gridpanel 의 이름은 

Sample.view.GridPanel

이라고 주고

xtype 은 'gridpanel' 라고 줍니다.

해당 panel 을 define 할 때 생성자(constructor) 에서 뭔가 작업을 해 줘야 합니다. 

이번 과제는 이 부분에서 어떻게 코드를 넣는지가 핵심 입니다.

constructor: fucntion(config){

/* 여기다 필요한 코드를 써야 합니다 */

this.callParent(arguments);

}

을 사용하셔야 할 수도 있습니다.

이렇게 해서 grid panel 을 만들었으면 Main.js (tab panel) 에서 코드는 아래와 같이 실행합니다.

Ext.define("Sample.view.Main", {
    extend: 'Ext.tab.Panel',
	
    requires: [
		Ext.TitleBar
    ],
	
    config: {
        tabBarPosition: 'bottom',

        items: [
			{
				docked: 'top',
				xtype: 'fonttoolbar',
				title: 'My app',
			},
            {
                xtype: 'homepanel'
            },
			{
                xtype: 'gridpanel'
            },
        ]
    }
});

이렇게 했을 때 결과 화면은 아래와 같습니다.

그리고 만약 아래와 같이 코드를 줬다면

Ext.define("Sample.view.Main", {
    extend: 'Ext.tab.Panel',
	
    requires: [
		Ext.TitleBar
    ],
	
    config: {
        tabBarPosition: 'bottom',

        items: [
			{
				docked: 'top',
				xtype: 'fonttoolbar',
				title: 'My app',
			},
            {
                xtype: 'homepanel'
            },
			{
                xtype: 'gridpanel',
				row:3,
				col:4
            },
        ]
    }
});

결과 화면은 다음과 같다.

그리고 끝으로 버튼을 클릭하면 해당하는 버튼의 텍스트를 출력해 주도록 합니다.