extjs mit Auf-und Ab-Methoden

Question

Ich versuche up und down zu verwenden, anstatt Ext.getCmp anrufen, aber ich verstehe es nicht ganz. Ich habe diesen Code

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

in diesem größeren Code

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'); 
}); 

Was ich bin verwirrt auf, warum ich das Hashtag in wildAnimal brauchen diese Funktion zu erhalten. Auch wenn ich zu widget.window umschalte, hört der Listener-Code auf zu arbeiten. Mein Code erstellt ein Fenster, aber ich kann den Wert der Combobox nicht übergeben, wie ich es kann, wenn es ein Formularfeld ist. Wie ich es verstehe, up wird verwendet, um Sachen von der Elternklasse zu finden. Wenn ich eine widget.window verwende, rufe ich this.up(widget) an? Ich kann das nicht zur Arbeit bringen. Ich bin auch sehr neu in Ext JS, so viele Dinge können über meinen Kopf gehen> __ <.

Answer 1

Die Methoden up und down werden verwendet, um den Komponentenbaum zu durchlaufen.

Bei Verwendung von up und down mit Selektoren überprüft der Standardselektor den X-Typ der Komponente. up('form') bedeutet also: "Gehe weiter zum Komponentenbaum, bis du ein Formular gefunden hast." Der Selektor #wildAnimal bedeutet "gehe weiter, bis du die Komponente gefunden hast, bei der id == 'wildAnimal'". Wenn Sie up() ohne Selektoren verwenden, wird der übergeordnete Container zurückgegeben.

Wenn Sie Ext.window.Window anstelle von Ext.form.Panel verwenden möchten, müssen Sie alle Vorkommen von up('form') mit up('window') ändern. Andernfalls, wenn Sie wissen, dass "myCombo" und "wildAnimal" Geschwisterkomponenten sind, können Sie einfach up().down('#wildAnimal') verwenden und es wird funktionieren, nachdem Sie den Typ des übergeordneten Containers geändert haben.

Answer 2

Die Symantiken der Auf- und Ab-Methoden folgen der Klasse ComponentQuery. Ich empfehle Ihnen, die API-Dokumentation zu lesen. Und siehe unten, um mit ExtJS zu beginnen.

Viel Glück!

---

Ich werde nur das hier für Sie verlassen.

Dies ist eine Einstiegsliste von Ressourcen, die ich für meine Kollegen zusammengestellt habe: Offensichtlich Links zu ExtJS4.1, aber fühlen Sie sich frei, um die gleiche für die neueste Version zu greifen.

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

Beispiele: http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/

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

Ressourcen:

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

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

Werkzeuge:

Firebug Plugin (Illuminations für Entwickler)

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

Wie

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 

Sobald Sie mit diesen Konzepten vertraut sind Get Started Entscheiden Sie, welche Komponenten Sie verwenden und verwenden werden einen tieferen Einblick in die spezifischen Anleitungen im Abschnitt Komponenten. Ich würde auch empfehlen, die App-Architektur-Tutorials zu lesen.

Answer 3

Ich hatte Probleme Ext.getCmp("id") verwenden, so dass die beste Lösung scheint Ext.up/down(), und bekam es in diesem Thema sehr gut erklärt:

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

Hoffen, dass es für jedermann hilft, die nicht zu verstehen, haben scheinen es.