extjs
일반적인 함정 및 모범 사례

우려의 분리

보다 나쁜

ViewController :

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

전망:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

보다 나은

ViewController :

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

전망:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

설명

이 예제에서 두 가지 코드 스 니펫은 동일한 작업을 수행합니다. 그러나, myhappyfield 변경에 대한 언급이나 '행복'을 나타내는 방법론이 크게 바뀌는 경우, 전자 접근법은 참조가 사용되는 각 장소를 변경해야합니다.

분리 된 관심사 (후자의 예)로,보기는 다른 클래스가 사용할 수있는 '행복'을 수정하는 추상적 인 방법을 제공합니다. 쿼리와 구성 요소 조작은 한 곳에서 (뷰 정의 자체와 함께) 유지되며 추상화 된 메소드에 대한 호출은 변경 될 필요가 없습니다.

컨트롤러가 뷰의 레이어를 통해 쿼리 할 수는 있지만 해당 동작을 뷰의 메서드로 추상화하는 것이 좋습니다. 이 방법으로 뷰는 다른 클래스가 뷰에 영향을 미치도록 표준화 된 방법을 제공하고 뷰 구조가 변경 될 때 다른 클래스의 변경을 최소화하거나 제거 할 수 있습니다.

확장 대 무시

재정의 :

파일 재정의 :

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

앱에서 사용 :

{
    xtype: 'textfield'
}

확장 프로그램 :

파일 재정의 :

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

앱에서 사용 :

{
    xtype: 'cornfield'
}

설명

ExtJS는 기존 클래스의 동작을 변경하는 두 가지 주요 방법을 제공합니다. 즉, 확장하고 재정의합니다. 각각에는 이점을 사용하기 전에 고려해야 할 함정과 함정이 있습니다.

클래스를 확장하면 상위 클래스에서 동작 및 구성을 상속하는 새 클래스가 만들어집니다. 확장을 통해 새로운 클래스를 생성함으로써 반복되는 구성 및 동작 변경을 중앙 위치에서 수행하고 응용 프로그램 전체에서 재사용 할 수 있습니다. 확장의 가장 큰 장점은 부모 클래스가 그대로 유지되고 확장 된 동작이 바람직하지 않은보다 단순한 사용 사례에 사용할 수 있다는 것입니다.

확장을위한 유용한 사용 사례로는 특수한 동작을하는 사용자 지정 양식 필드, 특수화 된 모달 및 사용자 지정 구성 요소가 일반적으로 포함됩니다.

클래스를 재정의하면 기존 클래스의 동작이 수정됩니다. 재정의의 구성 및 메소드는 상위 클래스의 하위 클래스를 완전히 대체하여 새로운 기본 구성과 응용 프로그램 전체에 적용되는 비헤이비어를 만듭니다. 재정의는 사용의 파괴적인 특성 때문에 드물게 사용해야합니다. 확장 클래스는 일반적으로 부모 클래스를 방해하지 않고 동일한 이점을 제공합니다.

그러나 재정의는 일부 상황에서 이점을 제공 할 수 있습니다. 좋은 사용 사례로는 기존 클래스의 버그 수정, 토큰이나 세션 데이터와 같은 추가 정보를 요청에 추가하기위한 프록시 동작 수정, 일반적으로 특정 동작을 응용 프로그램의 기본 동작으로 강제하는 경우가 있습니다.

버그 수정과 별도의 재 지정

ExtJS에서는 프레임 워크의 거의 모든 메소드를 대체하고 자신의 것으로 대체 할 수 있습니다. 따라서 ExtJS 소스 코드를 직접 수정하지 않고도 기존 클래스를 수정할 수 있습니다.

때로는 기존 클래스를 향상 시키거나 클래스에 적절한 기본 속성을 제공 할 수 있습니다.

예를 들어, 모든 모델 데이터 필드에 Null 값을 허용 할 수 있습니다.

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

다른 경우에는 프레임 워크에서 손상된 부분을 수정해야합니다.

다음은 문서가있는 버그 수정 예입니다. 클래스 이름에는 "재정의"보다는 "수정"이 포함됩니다. 실제 이름은 중요하지 않지만 분리는 있습니다.

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

이제 ExtJS의 다음 버전으로 업그레이드 할 시간이되면, 제거 할 수있는 버그 수정을 확인하기 위해 확인해야 할 곳은 단 하나입니다.