Come fare riferimento all'oggetto contenitore antenato da un controllo ExtJS?

Question

Sto usando ExtJS per creare una finestra contenente diversi pannelli come elementi. Uno di questi pannelli contiene un pulsante.

Desidero collegare un gestore al mio pulsante in modo tale che quando faccio clic sul pulsante, posso nascondere la finestra contenente i pannelli sopra menzionati e questo pulsante.

La mia domanda è: come posso ottenere un riferimento alla finestra principale del mio pulsante SENZA fare riferimento alla finestra con ID? Voglio letteralmente un riferimento all'istanza di Ext.Window e non l'istanza di Ext.Panel che contiene il mio pulsante.

Nota: non desidero fare riferimento alla finestra con id perché sto creando una sottoclasse della classe Ext.Window, pertanto l'ID della finestra non sarà sempre lo stesso. In breve, sto creando una classe Wizard e quando faccio clic sul pulsante Annulla della procedura guidata, voglio nascondere la finestra della procedura guidata che contiene il pulsante.

Ecco il mio codice:

var newWizardWindow = new WizardWindow({ 
    id: 'newWizardWindow', 
    title: 'New', 
    items: [ 
    ... 
    ], 
    buttons: [{ 
    text: 'Cancel', 
    handler: function() { 
     // REFERENCE WizardWindow instance here. 
    } 
    },{ 
    id: 'newWizardPreviousButton', 
    text: '« Previous', 
    disabled: true, 
    handler: newWizardNavigator.createDelegate(this, [-1]) 
    },{ 
    id: 'newWizardNextButton', 
    text: 'Next »', 
    handler: newWizardNavigator.createDelegate(this, [1]) 
    }], 
    listeners: { 
    … 
    } 
}); 

Ecco alcune idee sono venuto su con quanto come nascondere la finestra:

1. this.ownerCt.ownerCt (essendo questo il tasto). Non favorevole come con un futuro aggiornamento di ExtJS, il numero di genitori tra la finestra e il pulsante potrebbe cambiare.
2. In qualche modo memorizza un riferimento all'istanza WizardWindow nella classe WizardWindow.
3. Trova la classe WizardWindow [CSS] più vicina in modo jQuery: $ (this) .closest ('. WizardWindow'). Forse this.findByParentType ('WizardWindow')?

Answer 1

Come provare il metodo findParentByType(...)? Ricordo di averlo usato poche volte.

findParentByType (/ Ext.Component/Classe xtype String, [superficiale booleano]): Ext.Container

Trova un contenitore di sopra di questo componente a qualsiasi livello da xtype o classe.

Qui è possibile utilizzare il xtype al posto del id come riferimento e la xtype è lo stesso non importa quale esempio si dispone di quel tipo.

buttons: [{ 
    text: 'Cancel', 
    handler: function() { 
     // REFERENCE WizardWindow instance here. 
     var parentWindow = this.findParentByType('xtypelizardwindow'); 
    } 
}] 

Answer 2

Nella configurazione del pulsante, come un fratello della proprietà del gestore, è possibile aggiungere un ambito: proprietà newWizardWindow? Non sono sicuro al 100% se funzionerà, ma penso che lo farà. Questo imposterà la portata del tuo gestore di pulsanti per essere la finestra, e all'interno della funzione di gestore puoi semplicemente fare this.hide();

Answer 3

È possibile passare il riferimento come ambito.

 
buttons: [{ 
    text: 'Cancel', 
    scope:this, 
    handler: function() { 
    } 
}] 

Answer 4

this.ownerCt fornisce inoltre un riferimento all'oggetto padre, che è contenitore. mentre sta usando questo.findParentByType (parent xtype)