2011-05-13 14 views
10

Estoy usando ExtJS para crear una ventana que contenga varios paneles como elementos. Uno de estos paneles contiene un botón.¿Cómo hacer referencia al objeto del contenedor antecesor desde un control ExtJS?

Quiero adjuntar un controlador a mi botón para que cuando haga clic en el botón, pueda ocultar la ventana que contiene los paneles mencionados anteriormente y este botón.

Mi pregunta es: ¿cómo puedo obtener una referencia a la ventana primaria de mi botón SIN hacer referencia a la ventana por ID? Literalmente quiero una referencia a la instancia de Ext.Window y no a la instancia de Ext.Panel que contiene mi botón.

Nota: No quiero hacer referencia a la ventana por id porque estoy subclasificando la clase Ext.Window y, por lo tanto, la id de la ventana no siempre será la misma. En resumen, estoy creando una clase de asistente, y cuando hago clic en el botón Cancelar del asistente, quiero ocultar la ventana del asistente que contiene el botón.

Aquí está mi código:

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: { 
    … 
    } 
}); 

Aquí están algunas ideas que he llegado con la medida de lo cómo ocultar la ventana:

  1. this.ownerCt.ownerCt (siendo este el botón) No es favorable, ya que con una actualización futura de ExtJS, el número de padres entre la ventana y el botón podría cambiar.
  2. De alguna manera almacenar una referencia a la instancia de WizardWindow en la clase WizardWindow.
  3. Encuentra la clase de WizardWindow [CSS] más cercana en jQuery fashion: $ (this) .closest ('. WizardWindow'). Tal vez this.findByParentType ('WizardWindow')?

Respuesta

8

¿Qué tal si probamos el método findParentByType(...)? Recuerdo haberlo usado varias veces.

findParentByType (xtype Cadena/Ext.Component/Clase, [superficial Boolean]): Ext.Container

Encontrar un recipiente por encima de este componente en cualquier nivel por xtype o tipo.

Aquí se puede utilizar el xtype en lugar de la Identificación como referencia y el xtype es el mismo sin importar lo que usted tiene ejemplo de ese tipo.

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

Ojalá pudiera dar esta respuesta a +10 :) –

1

En la configuración de este botón, como un hermano a su propiedad manipulador, se puede agregar un ámbito: la propiedad newWizardWindow? No estoy 100% seguro de que eso funcione, pero creo que sí. Esto configurará el alcance de su manejador de botones como la ventana, y dentro de la función de manejador puede hacer esto. Hide();

+0

¿Has probado esto? He usado este método en un problema similar http://stackoverflow.com/questions/8588968/extjs-button-scope y Chau arriba lo ha respondido ... – goh

2

Puede pasar la referencia de referencia como alcance.

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

Aquí, ¿no sería "este" el botón? ¿Esa es tu intención? –

+0

Hmm, si usa 'esto' en línea, no creo que funcione. Hice una pregunta similar. http://stackoverflow.com/questions/8588968/extjs-button-scope – goh

+0

¡Esto funciona, y fyi es la forma correcta de hacerlo! 'this' dentro del controlador se convertirá en la clase misma. –

0

this.ownerCt también dará referencia al objeto principal, que es contenedor. ya que está usando esto.findParentByType (parent xtype)

Cuestiones relacionadas