Obiekty w ExtJS. Ext.create lub new operator?

Question

Jestem nowy w ExtJS. Zacząłem programować małą formę. I zupełnie się nie myliłem o używaniu Ext.create i nowego operatora.

Tak oto kod:

Chciałem zaprogramować formularza. Znalazłem mały przykład na jednej ze stron sencha. Tworzy formę takiego:

var descAndSystem = new Ext.form.Panel ({ 
    region: 'center', 
    layout: 'vbox', 
    margins: '5 5 5 5', 
    xtype: 'form', 
    title: 'Some title', 
    id: 'descAndSystem', 
    width: '800', 
    items: [ 
     { xtype: 'textarea', 
    fieldLabel: 'Provide a description', 
    name: 'rightdescription', 
     }, 
     { 
     xtype: 'combobox', 
     fieldLabel: 'Choose System', 
     store: systems, 
     queryMode: 'local', 
     displayField: 'name', 
     valueField: 'name', 
     name: 'system' 
     } 
    ] 
}); 

następnie użyłem descAndSystem jako składnik w rzutni:

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    id: 'wizardcontainer', 
    items: [ 
     descAndSystem, 
     { 
      region: 'south', 
      layout: 'hbox', 
      margins: '5 5 5 5', 
      items: [ 
       { xtype: 'button', text: '<< Back', handler: onNext }, 
       { xtype: 'button', text: 'Next >>', handler: onNext }, 
       { xtype: 'button', text: 'Cancel', align: 'right', handler: function() { alert ('Abgebrochen geklickt.'); } } 
      ] 
     } 
    ] 
}); 

Po wielu prób i błędów odkryłem, że mogę uzyskać dostęp do wartości mojego formularza przez następujący kod:

Ext.getCmp ('descAndSystem').getForm().findField ('rightdescription').getValue() 

w przeciwieństwie do tego, co jedna z książek kupiłem powiedział następujący kod nie zadziałał:

Ext.getCmp ('rightdescription').getValue() 

Ale moim prawdziwym problemem jest to, że spodziewam się, że

Ext.create ('Ext.form.Panel', { .... }); 

jest taka sama jak

new Ext.form.Panel ({...}); 

Ale kiedy zrobić ten ostatni interpreter Chrome mówi:

Uncaught TypeError: Cannot read property 'Panel' of undefined' 

Ponownie, po wielu próbach i błędach działało:

new Ext.Panel ({...}); 

Nie tylko, że nie mogłem znaleźć żadnego odniesienia do obiektu o tej nazwie w dokumentacji również linię

Ext.getCmp ('descAndSystem').getForm().findField ('rightdescription').getValue() 

teraz daje błąd:

Uncaught TypeError: Object [object Object] has no method 'getForm' 

Ponadto , Próbowałem zastąpić descAndSystem inną formą przez manipulację DOM, w dokumentacji są różne metody zamiany. Żadna z nich nie działała, zawsze pojawiał się komunikat o błędzie "nie ma metody" zastępuje "". Mam silne podejrzenie, że coś złego zrobiłem fundamentalnie. Jakieś wskazówki? Używam ExtJS 4 i Chromium 17.0.963.56 na 64-bitowym systemie Ubuntu 10.10.

Answer 1

Główną różnicą jest to, że Ext.create('Ext.form.Panel') automatycznie pobrać odpowiedni plik javascript jeśli klasa Ext.form.Panel nie istnieje. Operator wanilii new nie może tego zrobić - nie ma pojęcia, co może być ani Ext.form.Panel, ani gdzie można znaleźć definicję.

nie można odczytać właściwość „Panel” undefined” błąd wskazuje, że nie tylko jest Ext.form.Panel nie zdefiniowane, ani nazw jest obiekt nadrzędny Ext.form.

Answer 2

Zmień linię

name: 'rightdescription', 

do

id: 'rightdescription', 

i można uzyskać dostęp do textarea bezpośrednio za pomocą:

var yourTextArea = Ext.getCmp ('rightdescription'); 
var yourTextAreaContent = yourTextArea.getValue(); 

Answer 3

var descAndSystem = Ext.create('Ext.form.Panel', {...}) 

Oto dokumentacja Ext.create()http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-create

Co do innych problemów ...

1. Kiedy mówisz new Ext.Panel({...}) nie jesteś już tworząc panel formularz dlatego metoda getForm() nie będzie dostępna.
2. Jak pokazało się na stronie @NTom, podaj dowolny komponent w postaci id, a będziesz mieć do niego dostęp za pomocą Ext.getCmp. http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp

Answer 4

Myślę, że znalazłem problem. Skopiowałem przykład z he stronie Sencha:

http://www.sencha.com/learn/getting-started-with-ext-js-4

index.html zawiera EXT-debug.js. Kiedy dołączę ext-all-debug.js, wtedy nowy operator zacznie działać :-)

Dzięki za pomoc. Greets Kai