Zugriff auf root-Eigenschaft in ExtJS benutzerdefinierte Ansicht?/Duplizieren Sie die Komponenten

Question

Zu Testzwecken habe ich 2 Ansichten gemacht. Eine, die die andere Ansicht erfordert. Jetzt möchte ich, dass die Leute in der Lage sind, Komponenten mehrmals als Tab zu öffnen, also muss ich natürlich jedem Tab und Element innerhalb der Komponente eindeutige IDs zuweisen, richtig?

Meine Frage ist, wie kann ich auf eine der root-Eigenschaften in einer Ansicht von sagen das Objekt docketItems zugreifen? Im folgenden Code wird ein undefinierter Fehler this.varindex bei id: 'accountSearchField' + this.varindex, verursacht. Varindex wird dynamisch von der anderen Komponente zugewiesen. (Ich habe es im folgenden Beispielcode fest programmiert)

Beachten Sie, dass ich die genaue ID nicht kenne, also kann ich etwas wie Ext.getCmp nicht verwenden. Ich könnte Ext.ComponentQuery.query('searchAccount') verwenden, aber vielleicht gibt es einen besseren Weg, dies zu tun?

Im Folgenden finden Sie einen Teil des Codes, der von meiner Hauptkomponente benötigt wird.

Ext.define('cp.views.search.Account', {  
    extend: 'Ext.panel.Panel',  
    xtype: 'searchAccount', 
    varindex: "uniqueid_assigned_by_main_component", 
    listeners: { 
     beforerender: function(){ 
      this.id = 'panelSearchAccount' + this.varindex 
     } 
    }, 
    items: [ 
     { 
      xtype: 'grid', 
      store: { 
       type: 'Account' 
      }, 
      id: 'searchAccount' + this.varindex, 
      columns: [ 
       /// 
      ], 
      dockedItems: [ 
      { 
       xtype: 'fieldset', 
       items: [ 
        { 
         id: 'accountSearchField' + this.varindex, 
         xtype: 'searchfield' 
        } 
       ] 
      }] 
     } 
    ] 
}); 

Answer 1

Ext generiert IDs für DOM-Elemente und stellt sicher, dass sie für die Seite eindeutig sind. Daher ist es ungewöhnlich, das ID-Attribut für referenzierende Komponenten zu verwenden. Zu diesem Zweck gibt es zwei Konfigurationseigenschaften, itemId und reference.

Es gibt mehrere Methoden, die verwendet werden können, um eine Komponente von einem übergeordneten Container oder global über itemId zu erfassen.

• Ext.container.Container.getComponent
• Ext.container.Container.query
• Ext.container.Container.down
• Ext.container.Container.child
• Ext.ComponentQuery.query

Zusätzlich können Komponenten von Ext.app.Controllers die refs Konfiguration mit erworben werden. Diese Methoden nehmen eine selector Zeichenfolge. Der Selektor für eine itemId ist die itemId mit dem Präfix '#' (z. B. '#itemId'). Sie geben das '#' nicht an, wenn Sie eine Komponente mit einer itemId konfigurieren.

Zusammen mit der Unterstützung für MVVM in Ext JS 5 ist der Bezeichner reference eindeutig für den Container der Komponente oder ViewController. Eine Komponente kann durch Referenz von Komponenten oder ViewControllern unter Verwendung von lookupReference erfasst werden. Die Methode lookupReference verwendet nur Referenzen als Eingabe und benötigt daher kein Präfix. Wenn Sie in der Lage sein möchten, auf eine Komponente zu verweisen, die einer bestimmten Modellinstanz (Konto) zugeordnet ist, können Sie die Komponentenklasse mit einer alias definieren und die Referenz oder die itemId konfigurieren, wenn Sie jede Instanz zum Container hinzufügen.

for (var i = 0, ilen = accountModels.length; i < ilen; ++i) { 
    container.add({ 
     xtype: 'accountpanel', 
     reference: accountModel[i].get('accountNumber') 
    }); 
} 

In diesem Beispiel eine zugehörige Platte Konto kann über die Verwendung der Kontonummer später erworben werden.

var accountPanel = this.lookupReference(accountModel.get('accountNumber')); 

Answer 2

Eigentlich könnte ich es herausgefunden haben. Ich habe einfach die Objekte innerhalb des Ponderender-Ereignisses verschoben und die this.add()-Funktion verwendet.