extjs za pomocą metody "w górę iw dół"

Question

Próbuję użyć up i down, aby zadzwonić, a nie Ext.getCmp, ale nie całkiem rozumiem. Mam ten kod

listeners: { 
    'change': function(field, selectedValue) { 
     // Ext.getCmp('wildAnimal').setValue(selectedValue); 
     this.up('form').down('#wildAnimal').setValue(selectedValue); 
    } 
} 

wewnątrz tej większej kodu

Ext.define('ryan', { 
    constructor: function() { 
     Ext.create('Ext.form.Panel', { 
      bodyStyle: {"background-color":"green"}, 
      name: 'mypanel', 
      title: 'Animal sanctuary, one animal per location ', 
      width: 300, 
      bodyPadding: 10, 
      test: 'mycat', 
      style: 'background-color: #Fdd;', 
      renderTo: Ext.getBody(), 
      items: [{ 
       itemId: 'button1', 
       xtype: 'button', 
       text: 'click the button', 
       handler: function() { 
        alert('(<^_^>)'); 
       } 
      },{ 
       itemId: 'wildAnimal', 
       xtype: 'textfield', 
       fieldLabel: 'animal:', 
       name: 'myanimal' 
      },{ 
       itemId: 'myCombo', 
       xtype: 'combo', 
       fieldLabel: 'choose your animal', 
       store: animals, 
       queryMode: 'local', 
       displayField: 'name', 
       listeners: { 
        'change': function(field, selectedValue) { 
         // Ext.getCmp('wildAnimal').setValue(selectedValue); 
         this.up('form').down('#wildAnimal').setValue(selectedValue); 
        } 
       } 
      }] 
     }); 
    } 
}); 

var animals = Ext.create('Ext.data.Store', { 
    fields: ['itemId', 'name'], 
    data: [{ 
     "itemId": 'mycat', 
     "name": "mycat" 
    },{ 
     "itemId" : 'mydog', 
     "name": "mydog" 
    },{ 
     'itemId' : 'sbBarGirls', 
     "name": "BarGirls-when-drunk" 
    }] 
}); 

Ext.onReady(function() { 
    var a = Ext.create('ryan'); 
    var b = Ext.create('ryan'); 
}); 

Co jestem mylić dlatego muszę hashtag w wildAnimal uzyskać tej pracy. Również po przełączeniu Ext.form.Panel na widget.window kod słuchaczy przestaje działać. Mój kod tworzy okno, ale nie mogę przekazać wartości combobox tak jak ja, gdy jest to panel formularza. Jak rozumiem, do znajdowania rzeczy z klasy nadrzędnej używane jest up. Podczas korzystania z widget.window czy mogę zadzwonić pod numer this.up(widget)? Nie mogę tego zmusić do działania. Ponadto jestem bardzo nowy w Ext JS, więc wiele rzeczy może się zdarzyć nad moją głową> __ <.

Answer 1

Metody up i down są używane do przechodzenia przez drzewo komponentów.

Przy użyciu up i down z selektorami, domyślny selektor sprawdza typ x komponentu. Tak więc up('form') oznacza "idź w górę drzewa komponentów, aż znajdziesz formularz." Selektor #wildAnimal oznacza "idź w górę, aż znajdziesz element, którego id ==" wildAnimal ". Jeśli użyjesz up() bez selektorów, to zwróci kontener nadrzędny.

Jeśli zdecydujesz się użyć Ext.window.Window zamiast Ext.form.Panel, będziesz musiał zmienić wszystkie wystąpienia up('form') z up('window'). W przeciwnym razie, jeśli wiesz, że "myCombo" i "wildAnimal" są składnikami siostrzanymi, możesz po prostu użyć up().down('#wildAnimal') i będzie działać po zmianie typu kontenera nadrzędnego.

Answer 2

Symantyka metod "w górę iw dół" jest zgodna z klasą ComponentQuery. Gorąco polecamy przeczytanie dokumentacji API na ten temat. Zobacz także poniżej, aby rozpocząć korzystanie z ExtJS.

Powodzenia!

---

Po prostu zostawię to tutaj dla ciebie.

To jest wstępna lista zasobów, które przygotowałem dla moich współpracowników: Oczywiście linki są do ExtJS4.1, ale nie krępuj się pobrać to samo dla najnowszej wersji.

API: http://docs.sencha.com/ext-js/4-1/

Przykłady: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

Przewodnicy: http://docs.sencha.com/ext-js/4-1/#!/guide

zasoby:

Sencha forum: http://www.sencha.com/forum/

StackOverflow: https://stackoverflow.com/questions/tagged/extjs

Narzędzia:

Firebug Plugin (Iluminacje dla programistów)

http://www.illuminations-for-developers.com/

Jak zacząć

1. Scroll through the Examples to get ideas of what you want to build. 
2. Read through these Guides : 
    ○ Getting Started 
    ○ Class System 
    ○ MVC 
    ○ Layouts 
    ○ Components 
    ○ Data Package 

Po zapoznaniu się z tymi pojęciami zdecyduj, które składniki będziesz używać i brać głębsze spojrzenie na konkretne przewodniki w sekcji Komponenty. Zaleciłbym także przeczytanie samouczków App Architecture.

Answer 3

miałem problemy z wykorzystaniem Ext.getCmp("id"), więc najlepszym rozwiązaniem wydaje Ext.up/down(), i dostał to wyjaśnione bardzo dobry w tym temacie:

https://www.sencha.com/forum/showthread.php?258048-Clarify-getCmp-vs-Up-down,

nadzieję, że pomoże każdemu, kto nie wydaje się zrozumieć to.