Benney Blog

ExtJS MVC구조를 통해 어플리케이션을 개발시 고민 중 하나가 컨트롤러의 등록이다. 

보통에 경우 app.js 즉 Ext.Application을 상속받은 클래스에 사용할 Controller를 등록하게 된다.

그러나 개발 시에는 매번 생성되는 컨트롤러를 app.js에 등록 하기 어렵고? 아니 귀찮고 규모가 큰 시스템에 경우

컨트롤러도 많아 지게 되어 모두 등록한다는 것 자체가 왠지 성능상에 좋지 않을 듯 싶다.

해서 생각한 것이 다이나믹하게 컨트롤러를 그때 그때 등록할수 있는 방법을 사용하게 된다.

대충 기술하자면 한개 정도의 미리 등록된 컨트롤러가 참조하고 있는 뷰를 통해 해당 컨트롤러에 

접근하면서 사용할 컨트롤러의 이름을 전달하고 접근과 동시에 application클래스에 특정 메소드를 호출하여

아래와 같이 새로운 컨트롤러를 등록하도록 하였다.

application안에서 컨트롤러를 등록하는 방법은 

var controller = this.getController('사용할 컨트롤러 클래스명');

controller.init(this); -> 여기서 this는 어플리케이션 클래스 이다.

문제는 이때 발생한다. 개발 모드에서 다이나믹하게 컨트롤러를 등록하여 사용할 수 있는 코드는 구축이 되었지만

실서버에 배포할 요량으로 빌드를 해보니 app.js에 등록되지 않은 컨트롤러는 빌드에서 빠지는 현상이 발생한다.

이는 ExtJS가 클래스의 종속성에 대해 검증하는 과정에서 사용되지 않는 즉 require가 없거나 참조관계 등이 없을 경우

실제 클래스 파일이 존재하는데도 빌드에서는 제외 시킨다는 것이다.

이 경우에는 Sencha Cmd로 생성한 어플리케이션 내의 build.xml파일을 수정하여 언제 사용될지 모르나 이미 존재하는 클래스를

빌드에 포함시키도록 할 수 있다.

Ext.application({
    name: 'MyApp',
    appFolder: 'app',

    controllers: [
        "main.App"
    ],

    uses: [
        /*ant-generated-content-start*/ /*ant-generated-content-end*/
    ],

    autoCreateViewport: true,
});

ExtJS로 뭘하나 만들어 볼까 싶어서 몇일 만지작 거리다.

집에 안쓰고 모셔놓은 HP미니 서버를 좀 활용해 사이트를 올려 봅니다.

아직 작업하는 중이고 미완성입니다.

좀 완성도를 높여 상시적으로 Q&A게시판으로 활용하고 

소스는 강좌를 통해 공개하려고 합니다.

주소 : http://benney.able.or.kr

안녕하세요 ExtJS 3번째 오프라인 강좌로 "ExtJS Class System & MVC 알아보기"를 
준비 했습니다.

ExtJS만의 클래스 시스템과 MVC 패턴을 통한 구현 방법을 알아보고 실무에 사용되는 
유용한 팁도 공유합니다. 

[강사소개]

• 삼성SDS ExtJS 강의 수행
• 한국센챠유저그룹 활동
• 온오프믹스 ExtJS 강의 진행
• ExtJS를 적용하여 다수의 시스템 구축 경험
• Blog : http://benney.tistory.com

[세부 내역]

• 대상 : ExtJS 초, 중급, ExtJs에 관심 있는 모든분들.
• 일시 : 6월 29일(토) 17:00 ~ 19:00
• 장소 : 토즈 강남 2호점(타워점 아닙니다.)
• URL : http://www.toz.co.kr/branch/main/index.htm?id=11
• 등록비용 : 50,000원
• 등록하기 (http://onoffmix.com/event/16084)
• 강의방식 : 준비 된 샘플을 통한 진행(실습아님)
• 강의내용
• ExtJS Class System
  1. Define & Create
  2. Config
  3. Extend & Mixins
  4. Static
  5. Dynamic Class Loading
• ExtJS MVC의 소개
1. MVC란 무엇인가?
2. MVC를 통해 무엇을 얻을 수 있나?
3. 각 요소에 대한 샘플을 보고 역할을 알 수 있다.
4. Controller는 만능인가? 알고 쓰자 Controller
   
   
   
• 기타 문의는 benneykwag@gmail.com으로 해주세요
  
  
  종료 후 뒷풀이를 하려고 합니다. 참석하신다는 분들이 있으면요 ^^
  (비용은 부담되지 않는 선에서 나누어 내도록 하시지요)

IOS7베타 버전이 출시되었습니다. 개인적으로 애플 제품을 상당히 선호하는 저에게

최근 애플의 행보~ 꼭 집어서 얼굴만 길어진 아이폰 5에 대한 불만이 상당합니다.

아이폰4를 사용 중이고 자연스럽게 아이폰5를 기다렸지만 실망감에 안드로이드로

전환할 까 고민하고 있습니다.

현재 아이폰 4(IOS6.1.3)의 문제는 다음과 같습니다.

1. 속도 

- 공장 초기화를 해서 좀 빨라졌지만 전반적으로 어플실행 속도등이

   버전이 올라갈수록 아이폰4에서는 점점 느려지고 있음.

- 한영전환, 페이스북, 웹브라우징

2. 화면사이즈

- 느림과 동시에 점점 얼굴을 찡그리며 처다봐야할 정도 임.

- 점점 눈의 기능이 떨어지므로 좀 더 큰 화면이 필요함.

3. 변화

- 기능적 변화가 그 동안 크지 않았고 애플은 심플하고 오래 갈수 

  있는 기능만 살린다고 생각하고 있지만 일부 편의 기능은 안드로이드에

  뒤져 있는 부분이 있음.

해서 현재 출시된 IOS7을 미리 체험해보고 아이폰5로 갈지 안드로이드로 갈지 

결정을 내리기로 했습니다.

아주 깔끔하고 가벼운 놈이다. ^^

기능도 상당하다.~

ExtJs 4.2 버전에서 전에 없던 툴팁 버그가 발생한다. 아래 그림과 같이 툴팁의 길이가 동적으로 늘어나지 않고 

텍스트가 일정크기 이상으로 늘어나지 않고 갇히게 된다.

이를 해결하기 위해 아래와 같이 Ext.tip.QuickTip클래스를 override한다.

Ext.override(Ext.tip.QuickTip, {
    helperElId: 'ext-quicktips-tip-helper',
    initComponent: function ()
    {
        var me = this;


        me.target = me.target || Ext.getDoc();
        me.targets = me.targets || {};
        me.callParent();


        // new stuff
        me.on('move', function ()
        {
            var offset = me.hasCls('x-tip-form-invalid') ? 35 : 12,
                helperEl = Ext.fly(me.helperElId) || Ext.fly(
                    Ext.DomHelper.createDom({
                        tag: 'div',
                        id: me.helperElId,
                        style: {
                            position: 'absolute',
                            left: '-1000px',
                            top: '-1000px',
                            'font-size': '12px',
                            'font-family': 'tahoma, arial, verdana, sans-serif'
                        }
                    }, Ext.getBody())
                );

            if (me.html && (me.html !== helperEl.getHTML() 
            		|| me.getWidth() !== (helperEl.dom.clientWidth + offset)))
            {
                helperEl.update(me.html);
                me.setWidth(Ext.Number.constrain(helperEl.dom.clientWidth + 
                	offset, me.minWidth, me.maxWidth));
            }
        }, this);
    }
});

적용 이후 아래와 같이 정상적으로 툴팁이 보여진다.

// 출처 : http://stackoverflow.com/questions/15834689/extjs-4-2-tooltips-not-wide-enough-to-see-contents

Ext.onReady(function() {
	/***
	 * Date : 2013.05.22
	 * Desc : 아래 코드는 Ext.form.field.Text클래스를 override를 통해 기능을 변경한 예제이다.
	 * 
	 * 		 
	 */
	Ext.define('Cookbook.overrides.TextField', {
		override: 'Ext.form.field.Text',

		onRender: function(){
			/***
			 *  기존 함수의 동작을 확장하기 위해 callParent를 사용한다.
			 *  이때 필요한 인수를 전달하여 원래 함수를 호출할 수 있다.
			 *  아래는 단순히 텍스트를 추가하는 방법을 보여준다.
			 *  간단하게 onRender함수 실행시 간단한 텍스트를 모든 텍스트에서
			 *  동일하게 표시할 수 있도록 되었다.
			 */
			this.callParent(arguments); // executes the Ext.form.field.Text.onRender function
			// Ext.form.field.Text.superclass.onRender.apply(this, arguments); // executes the Ext.form.field.Base.onRender function

			Ext.core.DomHelper.append(this.el, '
' + this.infoText + '
');

		}
	});
	Ext.application({
        name: 'Customer',
        launch: function(){
		Ext.create('Ext.container.Viewport', {
          layout: 'fit',
          items: [{
              xtype: 'form',
              title: 'Security Question Form',
              defaultType: 'textfield',
              items: [{
                  fieldLabel: 'Security Question',
                  name: 'securityQuestion',
                  allowBlank: false,
                  infoText: 'You are required to write a security question for your account.'
              }, {
                  fieldLabel: 'Security Answer',
                  name: 'securityAnswer',
                  allowBlank: false,
                  infoText: 'Please provide the answer to your security question.'
              }]
          }]
      });
        }
    });

});
// 출처 : Ext JS4 Web Application Development Cookbook

Ext.onReady(function() {
	/***
	 * Date : 2013.05.22
	 * Desc : Override Ext JS functionality
	 * 		  당신이 ExtJS 프레임웍의 동작을 변경하고자 한다면(권장하지 않음)
	 * 		  직접 프레임웍을 편집하지 않고 override를 이용해여 당신이 만든 클래스를 
	 * 		  통해 쉽게 제어 또는 변경할 수 있다.
	 * 
	 * 		  프레임 워크 코드를 변경하는 것은 강력하게 다른 개발자로 권장하지되는 것은 
	 * 		  변경을 실현하지 않을 수 있으며 불쾌 표준이 아닌 행동에 의해 놀라게 될!
	 * 
	 * 		  override는 기존의 클래스를 가지고도 기존 기능의 동작을 수정하거나 완전히
	 * 		  새로운 것들을 추가 할 수 있습니다. 이것은 크게 프레임워크의 완전히 밖으로 
	 * 		  상자의 동작을 변경하는
	 * 		  매우 간단한 방법을 제공하기 때문이다.
	 * 
	 * 		  Ext JS override는 Ext.Base.override를 칭한다.
	 * 		  Ext.override(Object originalCls, Object overrides) 오리지날 클래스와 합치길 원하는
	 * 		  클래스를 지정하므로서 두개의 클래스가 병합된다.
	 */
	Ext.define('Simple.Class', {
		welcome : function() {
			alert('Welcome to the app');
		}
	});

//	Simple.Class.override({
//		goodBye : function() {
//			alert('Goodbye');
//		},
//
//		runAll : function() {
//			this.welcome();
//			this.goodBye();
//		}
//	});

	Ext.override(Simple.Class, {
		goodBye : function() {
			alert('Goodbye');
		},

		runAll : function() {
			this.welcome();
			this.goodBye();
		}
	});

	var app = new Simple.Class();
	app.runAll(); // Welcome to the app
	// Goodbye

});

// 출처 : Ext JS4 Web Application Development Cookbook

Ext.onReady(function() {
	Ext.define('Cookbook.DisplayPanel', {

		extend : 'Ext.panel.Panel',

		initComponent : function() {

			// apply our configuration to the class
			Ext.apply(this, {
				title : 'Display Panel',
				html : 'Display some information here!',
				width : 200,
				height : 200,
				renderTo : Ext.getBody()
			});

			// call the extended class' initComponent method
			this.callParent(arguments);
		}

	}, function() {
		console.log('Cookbook.DisplayPanel defined!');
	});

	var displayPanel = Ext.create('Cookbook.DisplayPanel');
	displayPanel.show();

	// define our Cookbook.InfoTextField class
	Ext.define('Cookbook.InfoTextField', {

		extend : 'Ext.form.field.Text',
		/***
		 * override했고 this.callparent를 호출하여.
		 * 바로 부모클래스의 onRender메소드가 실행되도록 하였다.
		 */
		onRender : function() {
			this.callParent(arguments);

			// insert our Info Text element
			Ext.core.DomHelper.append(this.getEl(), '
' + this.infoText
					+ '
');
		}

	}, function() {
		console.log('Cookbook.InfoTextField defined!');
	});

	// create an instance of our Cookbook.InfoTextField
	var infoTextField = Ext.create('Cookbook.InfoTextField', {
		renderTo : Ext.getBody(),
		fieldLabel : 'Username',
		infoText : 'Your Username must be at least 6 characters long.'
	});

//	infoTextField.show();
});
// 출처 : Ext JS4 Web Application Development Cookbook