Benney Blog

ExtJS 오프라인 강좌 진행합니다.

일시 : 2/23 토요일 오후 7~9시

장소 : 토즈강남타워점

많은 참석 부탁드립니다.

아래에서 참석 신청해주세요

http://onoffmix.com/event/12445

강좌 프로젝트 올립니다. 내려받고 실행해보세요.

이제는 강좌 진행과 함께 소스도 함께 올리도록 하겠습니다.

benney.tistory.com.zip

오프라인 강의를 하려고 하는데 관심있으신 분들 댓글 달아주시면 감사하겠습니다.

사실 블로그에 올려야할 강좌는 쌓여있습니다. 일에 치이며 먹고살려니 블로그에

글올리는게 쉽지않습니다.

해서 이럴게 아니라 오프라인에서 강의를 해보는 것도 나쁘지 않다는 생각이

듭니다.

장소 : 강남 토즈(아는 곳이 여기밖에 없어서 전 상암인데 멀어도 오시는 분들에 맞출수 있음)

일시 : 미정 단지 시간은 평일저녁7시에서 9시까지(전 주말도 좋긴합니다만..)

내용 : ExtJS가 실무에서 어떻게 사용되는지 소스위주의 시연강의(실습하기에는 시간이 부족할 것 같음)

   MVC모델 중심의 시작부터 배포까지.

인원 : 최소 15명 정도는 되야 하지 않을까요?

비용 : 인당 5만원

댓글로 반응을 보고 해야할지 판단하려고 합니다.

어떠신지요?

이전 강좌에서 우리는 좌측 panel안에 davaview를 삽입하여 최초 실행 시 dataview내부 첫번째 data가

선택 되도록 코딩하였습니다.

이번에는 선택 된 데이터뷰가 우측 영역에 어플리케이션으로 나오도록 하고 이 어플리케이션에 그리드와

form을 배치하여 보겠습니다.

우선 컨트롤러가 dataview에서 select한 이벤트를 케치할 수 있도록 아래와 같이 구현합니다.

Ext.define('ria.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout : 'border',
    items: [
    {
        region: 'center',
        // 기존 panel에서 여러개의 패널을 
        // 붙여야 하므로 tabpanel로 변경합니다.
        xtype: 'tabpanel'
    },{
        region: 'west',
        xtype : 'WestTabPanel',
        width: 200
    }]
});


Ext.define('ria.controller.FrameController', {
.
.
.

   init: function() {
        this.control({
            // step1. 좌측 매뉴에 추가된 패널 즉 시스템 패널에 대한 이벤트 추가.
            'WestMenuPanel > WestMenuDataViewPanel': {
                afterrender: this.firstSelect,
                expand: this.onItemClicked
            }, // select이벤트 잡기.
            'WestMenuDataViewPanel > dataview': {
                select: this.onProgramSelect
            }
         });
    },
    onProgramSelect: function(dataview, record) {
        this.onProgramSelect2(record.get('pgm_class'), record.get('title'));
    },
    /***
     * 최종 클래스명과 탭패널에 추가시 추가할 탭이름을 받는다.
     */
    onProgramSelect2: function(pgm_class, title) {
        var centerpanel =  Ext.ComponentQuery.query('viewport container[region="center"]')[0];
        var tab = centerpanel.down('[tabuniqid=' + pgm_class + title + ']');
        if (!tab) {
            // 아래 클래스를 통해 공통 기능을 구현하고 이 클래스의 item으로 인자로 받아온
            // 클래스를 추가하도록 한다.
            tab = Ext.create('ria.view.pgms.CommonPanel',{
            });
            tab.add(Ext.create(pgm_class,{ region : 'center'}));
            tab.title = title;
            tab.tabuniqid = pgm_class+title;
            centerpanel.add(tab);
        }

        centerpanel.setActiveTab(tab);
    },

위에서 ‘ria.view.pgms.CommonPanel은 모든 프로그램들이 공통적으로 동일한 공통 기능을 갖도록 하기 위해 이 클래스를 부모로 사용하도록 하였다. 이 클래스는 로그아웃, 도움말, 검색 등의 공통적인 기능 가지고 있고 구현해야한다.

Ext.define('ria.view.pgms.CommonPanel',{
    extend : 'Ext.panel.Panel',
    alias : 'widget.CommonPanel',
    layout : 'border',
    initComponent: function() {
        var me = this;

        Ext.apply(this, {
            dockedItems: [{
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    { 
                        xtype: 'button', 
                        text: '도움말',
                        action : 'common.help',
                        listeners : {
                            click : function(a){
                                console.log('도움말 호출', me.uniqid);
                            }
                        }
                    },'-',
                    { 
                        xtype: 'button', 
                        text: 'MyPage',
                        action : 'common.help',
                        listeners : {
                            click : function(a){
                                console.log('도움말 호출', me.uniqid);
                            }
                        }
                    },'-',
                    { 
                        xtype: 'button', 
                        text: '로그아웃',
                        action : 'common.help',
                        listeners : {
                            click : function(a){
                                Ext.Msg.confirm('확인', '로그아웃하시겠습니까?', function(btn) {
                                    if(btn == 'yes') {
                                        console.log('도움말 호출', me.uniqid);
                                        Ext.create('Ext.ux.window.Notification', {
                                            position: 'tr',
                                            useXAxis: true,
                                            cls: 'ux-notification-light',
                                            iconCls: 'ux-notification-icon-information',
                                            closable: false,
                                            title: '확인',
                                            html: '로그아웃되었습니다.',
                                            slideInDuration: 800,
                                            slideBackDuration: 1500,
                                            autoCloseDelay: 4000,
                                            slideInAnimation: 'elasticIn',
                                            slideBackAnimation: 'elasticIn'
                                        }).show();
                                    }
                                });
                            }
                        }
                    },'-',
                    {
                        xtype: 'combo',
                        store: Ext.create('ria.store.system.Programs'),
                        displayField: 'title',
                        typeAhead: false,
                        hideLabel: false,
                        fieldLabel: '검색',
                        labelWidth: 40,
                        hideTrigger:true,
                        width: '400',
                        enableKeyEvents: true,
                        minChars: 2,
                        listConfig: {
                            loadingText: '검색 중입니다....',
                            emptyText: '검색어에 맞는 검색 결과가 없습니다.',

                            // Custom rendering template for each item
                            getInnerTpl: function() {
                                return '< h3 >< span >{[Ext.Date.format(values.input_date, "M j, Y")]}< br />by {input_user_name}< /span >{title}< /h3 >' +
                                    '{excerpt}';
                            }
                        },
                        pageSize: 10,
                        listeners: {
                            select: function(a, b) {
                                console.log(a,b)
                            }

                        }

                    }
                ]
            }]
        });
        me.callParent(arguments);
    }
});

이제 위의 CommonPanel안에 들어갈 즉 선택 되어 보여줘야할 어플리케이션을 구현해 보겠습니다.
위의 코드대로 실행하면 에러가 발생할 것입니다. 우선 아래의 json파일을 보겠습니다.
아래 파일은 dataview에 보여지고 있는 프로그램 리스트입니다. 그 중 첫번째 라인을 아래 소스와 같이 
수정합니다.
ria.view.pgms.project.ProjectMgrPanel은 우리가 구현할 프로그램으로 사내 프로젝트를 심플하게 관리하는
프로그램입니다.
/**
 ** Date : 2012.11.30
 ** Desc : 시스템이하 프로그램 리스트 제공
 ** Posn : /json/programlist.json
 **/
{"entitys":[{"pgm_class":"ria.view.pgms.project.ProjectMgrPanel","pgm_icon":"grid","pgm_nm":"나의 과제","title":"나의 과제"},
            {"pgm_class":"ria.view.pgms.RiaAppMain02","pgm_icon":"grid","pgm_nm":"하위 프로그램2","title":"프로그램2"},
            {"pgm_class":"ria.view.pgms.RiaAppMain03","pgm_icon":"grid","pgm_nm":"하위 프로그램3","title":"커뮤니케이션팀"},
            {"pgm_class":"ria.view.pgms.RiaAppMain04","pgm_icon":"grid","pgm_nm":"하위 프로그램4","title":"커뮤니케이션팀"},
            {"pgm_class":"ria.view.pgms.RiaAppMain05","pgm_icon":"grid","pgm_nm":"하위 프로그램5","title":"커뮤니케이션팀"},
            {"pgm_class":"ria.view.pgms.RiaAppMain06","pgm_icon":"grid","pgm_nm":"하위 프로그램6","title":"커뮤니케이션팀"}
            ],
            "errMsg":"","errTitle":"검색결과","message":"","success":true,"totalCount":"2"}



// ria.view.pgms.project.ProjectMgrPanel 구현 하기.
Ext.define('ria.view.pgms.project.ProjectMgrPanel',{
    extend : 'Ext.panel.Panel',
    alias : 'widget.ProjectMgrPanel',
    layout : 'border',
    initComponent: function() {
        var me = this;
        this.callParent(arguments);
    }
});

이제 실행해보면 아래와 같은 모양의 프로그램이 우측 패널에 보여지게 된다.

공통적으로 도움말, MyPage,로그아웃, 검색 등의 기능을 사용할 수 있는 구조이다.

각각의 기능은 나중에 구현하도록 하고 “나의과제”라는 프로그램을 구현해봅니다.

이 프로그램은 좌측에 그리드패널을 그 그리드의 데이터를 select하면 우측의 폼패널이 열리고

해당 과제의 내용을 보여주도록 구현하겠습니다.

/**
 ** Date : 2012.11.30
 ** Desc : 프로젝트 리스트 제공
 ** Posn : /json/projectlist.json
 **/
{"entitys":[{"prj_master_no":"PJ000001","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000002","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000003","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000004","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000005","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000006","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000007","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"},
            {"prj_master_no":"PJ000008","ytree_sgy_dtl_seq":"001","prj_leader":"쥐박이","prj_name":"1원가절감을 위한 공수산정","prj_bgrnd":"추진배경은 .....","prj_target":"프로젝트목표","prj_effect":"프로젝트효과","prj_std_dt":"2012.01.10","prj_end_dt":"2012.12.10","prj_status_cd":"A","prj_status_nm":"결재중","input_user_name":"홍길동","input_date":"2012.01.29"}
            ],
            "errMsg":"","errTitle":"검색결과","message":"","success":true,"totalCount":"340"}
/**
 * Date : 2012.11.30
 * Desc : 프로젝트 정보를 표현할 모델 클래스
 */
Ext.define('ria.model.ProjectMaster', {
    extend: 'Ext.data.Model',   // extend
    fields: [
        'prj_master_no',
        'ytree_sgy_dtl_seq',
        'prj_leader',
        'prj_name',
        'prj_bgrnd',
        'prj_target',
        'prj_effect',
        'prj_status_cd',
        'prj_status_nm',
        'prj_std_dt',
        'prj_end_dt',
        'input_user_name',
        'input_user_id',
        'input_date'
    ]
});

/**
 * Date : 2012.12.14
 * Desc : 프로젝트 리스트
 */
Ext.define('ria.store.project.Projects', {
    extend: 'Ext.data.Store',   // 당연히 store상속
    autoLoad : false,           // 자동 로드는 꺼놓자.
    model: 'ria.model.ProjectMaster',   // 모델은 동일하게 사용 세팅
    proxy: {
        type: 'ajax',
        url: '/json/project/projectlist.json',  
        reader: {
            type: 'json',
            root: 'entitys',
            totalProperty: 'totalCount',
            messageProperty: 'message'
        },
        listeners: {
            exception: function(proxy, response, operation){
                // 나중에 구현할 부분 모든 ajax 통신에 공통으로 쓸 수 있는
                // 에러 캐치 함수를 만들 것이다.
            }
        }
    }
});

Ext.define('ria.view.pgms.project.ProjectListPanel',{
    extend : 'Ext.grid.Panel',
    alias  : 'widget.ProjectListPanel',
    columnLines: true,
    initComponent: function() {
        var me = this;
        var store = Ext.create('ria.store.project.Projects');
        Ext.apply(this, {
            store: store,
            columns: [
            {
                text: '과제번호',
                width : 80,
                dataIndex: 'prj_master_no'
            },
            {
                text: '제목',
                flex : 1,
                dataIndex: 'prj_name'
            },
            { 
                text: '작성자',
                width: 70,
                sortable: false,
                dataIndex: 'input_user_name'
            },
            { 
                text: '시작일',
                width: 70,
                sortable: false,
                dataIndex: 'prj_std_dt'
            },
            { 
                text: '종료일',
                width: 70,
                sortable: false,
                dataIndex: 'prj_end_dt'
            },
            { 
                text: '작성일',
                width: 70,
                sortable: false,
                dataIndex: 'input_date'
            }],
            dockedItems: [
            {
                xtype: 'pagingtoolbar',
                store: store,
                //name : 'fnc003Main01',
                dock: 'bottom',
                displayInfo: true
            }],
            boardLoad : function(){
                me.store.load({             // 아직 로드전이므로 로드한다.이때 json파일 호출
                    params : {
                        km : 'A00000001'
                    }
                });
                //console.log('me.store:::', me.store)
            }
        });
        me.callParent(arguments);
        this.on('render', this.boardLoad, this);
    }
});

Ext.define('ria.view.pgms.project.ProjectMgrPanel',{
        extend : 'Ext.panel.Panel',
        alias : 'widget.ProjectMgrPanel',
        layout : 'border',
        initComponent: function() {
                var me = this;
                Ext.apply(this, {
                        items : [{
                                xtype : 'ProjectListPanel',
                                title : '과제리스트',
                                region: 'center'
                        }]
                });
                this.callParent(arguments);
        }
});

이제 실행해 봅니다. 우측에 프로젝트 리스트 패널이 실행되고 json파일의 내용이 출력되는 것을
확인 할 수 있습니다.

이제 어플리케이션의 틀이 완성되었으니 내용을 채울 차례입니다.

아래 그림은 앞으로 만들어볼 화면입니다.

"프로그램"탭에는 자신이 가지고 있는 권한내에서 필요한 프로그램이 보여지고

그 옆 "지식관리"라는 탭은 모두 공통적으로 사용하는 게시판성 프로그램입니다.

각각이 패널과 그리드, 상속관계, 레이아웃, 버튼, PropertyGrid 등의 요소를 포함하고 

있어 좋은 예제로 생각됩니다.

금주내로 아래 프로그램에 대해 강좌를 진행하도록 하겠습니다.

이번에는 지금까지 코드를 정리 하는 시간을 좀 갖도록 하겠습니다. 실제 시스템을 ExtJS로 구축하도보면 

특히나 MVC모델로 구현할 경우 Controller가 비대해지는 현상이 발생합니다.

이는 MVC를 오해해서 생기는 현상이 아닌가 생각되는데요. MVC에서 V는 View를 의미하는데 이러한 이유로 

View안에는 기능적인 코드가 다 빠져있고 그 것들이 모두 Controller안에 들어가 있게 됩니다. 

Controller역할을 로직의 구현으로 이해하는 경우인것 입니다. 결과적으로 Controller안에 모든 관련 View의 기능이

 구현되어 있고 View는 껍데기만 존재하는 것이죠.

이렇게 비대해진 Controller는 유지보수 입장에서 굉장히 길고 파악하기 힘들게 되고 View자제의 재활용성이 

기능을 포함하지 않은 단순 껍데기만 재활용하게 되어 반쪽짜리 클래스로 전락하게 되는 것이죠.

제 생각이지만 이게 아니라 View은 일종의 클래스 (화면을 기준으로 화면제어 등의 기능이 포함된.)로 생각하고

UI와 그에 따른 제어기능도 포함되도록 해야합니다. 그래야만 재활용 측면에서도 해당 View Class를 가져다 쓸때

 기능도 함께 쓸 수 있게됩니다.

 기능이 모두 Controller에 구현될 경우 재활용은 Controller까지 신경써야하니 활용도가 떨어지게 되는 것입니다.

그래서 아래 코드는 View안에서는 자신과 관련된 기능에 대해 구현을 하고 Controller는 View에서 구현 된 

기능을 함수 단위로 호출 만 하도록 하게끔 리팩토링 작업을 한 것이니 참고하고 봐주시기 바랍니다.

아래 코드의 요점은 Controller에 구현된 로직을 각 뷰 클래스로 옮기고 Controller에서는 함수단위로 호출만

 하도록 변경한것입니다.

// app/controller/FrameController.js 를 수정한다.
// views, refs, onLaunch를 확인하자.
Ext.define('ria.controller.FrameController', {
    extend: 'Ext.app.Controller',
    //stores: ['system.Systems'],
    views: ['ria.view.frame.WestMenuPanel',
            'ria.view.frame.WestMenuDataViewPanel'], // 꼭 명시되어야함, 명시하지 않을 경우 require를 이용해야합.
    refs: [
            {ref: 'westMenu', selector: 'WestMenuPanel'}
        ],
    init: function() {
    	this.control({
    		// step1. 좌측 매뉴에 추가된 패널 즉 시스템 패널에 대한 이벤트 추가.
    		'WestMenuPanel > WestMenuDataViewPanel': {
    			afterrender: this.firstSelect,
    			expand: this.onItemClicked
            }
         });
    },
    /**
     *  step2. afterrender는 추가된 패널 별로 render된 이후에 호출한다.
     *	추가된 시스템 패널 중에 열려 있는지 확인하면 맨처음 하나만 열리게 된다.
     *	그 열려있는 시스템 패널에 하위 프로그램이 로딩되어 추가될 수 있도록 코딩해야한다.  
    **/
    firstSelect : function(panel){
    	panel.firstSelectDataView();
    },
    /**
     * Step3. 시스템 패널을 클릭 할 때 마다 expand이벤트가 호출 된다.
     * 이 때 클릭되어 expand된 패널 위에 하위 프로그램을 출력하면 된다.
     * @param a
     * @param b
     * @param c
     */
    onItemClicked : function(panel){
    	panel.onItemClicked();
    },
    onLaunch: function() {
        this.getWestMenu().setWestMenuDataViewPanel();
    }
});

// app/view/frame/WestMenuDataViewPanel.js 를 생성한다.
Ext.define('ria.view.frame.WestMenuDataViewPanel',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.WestMenuDataViewPanel',
    animCollapse : true,
    collapsible : true,
    collapsed   : true,
    useArrows: true,
    rootVisible: false,
    multiSelect: false,
    initComponent: function() {
    	var me = this;
        Ext.apply(this, {
            items: [{
                xtype: 'dataview',
                trackOver: true,
                cls: 'feed-list',
                itemSelector: '.feed-list-item',
                overItemCls: 'feed-list-item-hover',
                tpl: '
{pgm_nm}

'
            }],
            header: {
                toolFirst: true
            },
            /***
             * Date : 2012.12.06
             * Desc : dataview상에 출력된 리스트 중에 맨처음 프로그램이
             * 		  선택되어지도록 한다.
             * @param store
             */
            firstSelectDataView : function(){
            	if(me.collapsed)	return;
    			var store = this.onItemClicked(); 
    			if(store){
   	 	    		var task = new Ext.util.DelayedTask(function(){
    	    			me.down('dataview').getSelectionModel().select(store.getAt(0));
    				});
    				task.delay(1000);
    			}
            },
            /**
             * Step3. 시스템 패널을 클릭 할 때 마다 expand이벤트가 호출 된다.
             * 이 때 클릭되어 expand된 패널 위에 하위 프로그램을 출력하면 된다.
             * @param a
             * @param b
             * @param c
             */
            onItemClicked : function(){
            	if(me.collapsed) return	// 패널이 접히지 않은 놈을 찾는다.
            	if(me.store) return;
            	me.store = Ext.create('ria.store.system.Programs');	// 재활용 되는 것을 막는다.
    	    	me.store.load({
    	    		params: {
    	    			// 아래 코드는 시스템 패널이 가지고 있는 시스템 아이디를 프로그램 store에 전달하는
        	    		// 코드다 이렇게 해야 각기 시스템 패널별로 해당 시스템 이하의 프로그램을 가져올수 있다.
        	    		pgm_syscd: this.pgm_syscd
        	    	}
        		});
            	// 최종 시스템 패널 안으 dataview에 프로그램 store를 바인딩 한다.
    	    	me.down('dataview').bindStore(me.store);
    	    	return me.store;
            }
        });
 
        this.callParent(arguments);
    }
});
// app/view/frame/WestMenuPanel.js를 추가합니다.
Ext.define('ria.view.frame.WestMenuPanel',{
    extend  : 'Ext.panel.Panel',
    alias   : 'widget.WestMenuPanel',
    layout:'accordion',	// 이놈 하위에 추가될 dataview또한 accordion
    collapsible: true,
    split:true,
    title : '^^',
    activeItem: 0,
    initComponent: function() {
        var me = this;
        Ext.apply(this, {
        	/***
        	 * Date : 2012.12.07
        	 * Desc : 최초 첫번째 프로그램 선택.
        	 */
        	setWestMenuDataViewPanel: function(){
        		var store = Ext.create('ria.store.system.Systems');
        		store.load(function(record, b, c){				// 아직 로드전이므로 로드한다.이때 json파일 호출
        			store.each(function(rec){		// store를 탐색하여
        				me.add({					// 메뉴가 추가될 패널에 아래와 같이 패널을 추가.
			    			xtype:'WestMenuDataViewPanel',
			    			title:rec.get('pgm_sysnm'),	// 시스템명
			    			pgm_syscd:rec.get('pgm_syscd'),	// 시스템 코드
			    			iconCls:rec.get('pgm_sysicon')	// 아이콘이 있다면 표기
			    		});
					});
        		});
        	}
    	});
        this.callParent(arguments);
    }
});