Ext.define/Ext.extend in Sencha Touch 2

Question

Sencha Touch 2 MVC를 시작합니다. Ext 3 경험이 많지만 완전히 새로운 세상입니다.

나는보기를 짓는데 아주 멀어 질 것 같습니다. 나는 인터넷에서 보았던 것을 기반으로 두 가지 방향으로 코드를 작성했으며, 둘 다 작동하지 않습니다.

경로 1

내 app.js :

Ext.application({ 
     name: 'BkAdmin', 
     views: ['LoginForm'], 
     launch: function() { 
      Ext.create('BkAdmin.view.LoginForm'); 
    } 
}); 

내보기/LoginForm.js :

Ext.define('BkAdmin.view.LoginForm', { 
     extend: 'Ext.form.FormPanel', 
     config: { 
      fullscreen: true, 
      initComponent: function() { 
         alert('yo!'); 
         BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
      } 
     } 
    } 
); 

이 오류가 없음을로드하고 심지어에서 양식 항목을 추가 할 수 있습니다 구성 섹션. 그러나 initComponent()는 불가피하게 호출되지 않으므로보기가 완전히 융통성이 없습니다.

경로 2

내 app.js :

Ext.application({ 
    name: 'BkAdmin', 
    views: ['LoginForm'], 
    launch: function() { 
    BkAdmin.view.LoginForm = new BkAdmin.view.LoginForm(); 
    } 
}); 

내보기/LoginForm.js는 :

BkAdmin.view.LoginForm = Ext.extend(Ext.form.FormPanel, { 
    fullscreen: true, 
    initComponent: function() { 
       alert('yo!'); 
     BkAdmin.view.LoginForm.superclass.initComponent.apply(this, arguments); 
    } 
}); 

이 플랫 아웃이 작동하지 않습니다. Chrome에서 '속성을 설정할 수 없습니다', '정의되지 않은'의 LoginForm '...보기가 어떻게 정의되지 않았습니까? 또한 '다음 클래스는 파일이로드 되었더라도 선언되지 않습니다 :'BkAdmin.view.LoginForm '.' 확실한 표정이 나에게 선언되었다.

많은 질문이 있습니다. 위의 경로에서 내가 뭘 잘못 했습니까? 경로 1에서 initComponent()를 호출하고 경로 2가 작동하도록하려면 어떻게해야합니까? 어떤 코드를 인용 부호로 묶어 사용하지 않는 것이 좋을까요?

감사합니다.

Answer 1

경로 1은 (거의) 올바른 방법입니다. 이 아닌 Ext.define을 사용하고 있어야합니다 (매우 잘 작동/안정적으로 작동하지 않음). 새 클래스 시스템 (Ext JS 4와 비슷 함) 때문입니다.

config 블록은 해당 클래스의 클래스/문서에 정의 된 구성에만 사용됩니다. fullscreen, items, cls, style 등과 같은 것들. 그 안에서 정의 된 그 밖의 것이 config이 아니라 구성은 instance.config에 저장됩니다.

대신 Ext.define 당신이 주요 구성 개체에서 오버라이드 (override) 할 방법을 넣어해야합니다

Ext.define('MyApp.view.MyView', { 
    extend: 'Ext.Component', 

    config: { 
     cls: 'custom-cls', 
     html: 'Some html' 
    }, 

    initComponent: function() { 
     // do something 
    } 
}); 

엽차는 센차 터치 2.0 initComponent을 사용 중지했다. 클래스가 인스턴스화 될 때 호출되는 메소드가 필요하면 initialize 메소드를 사용해야합니다. 이 실제로 인 경우가 아니면 이상적으로 구성을 initialize 안에 설정하지 않아야합니다. 항상 config 블록 안에 넣어야합니다.

마지막으로, 당신은 사용하여 확장 된 클래스의 메소드를 호출 할 수 있습니다 : 내선 JS 3.x 및 사용할 수있는 외부 JS 4.x의 here 사이의 클래스 시스템의 변경 사항에 대한 안내가 있습니다

this.callParent(arguments); 

하는 너에게 도움이 될지도 모른다. Sencha Touch 2.x here에 대한 업데이트 된 클래스 시스템 안내서도 있습니다.