dom - node - testing javascript frameworks

Rastrear ID de elemento DOM de nuevo a su componente ExtJs

Question

Estamos desarrollando una solución de automatización basada en web para una aplicación web construida con ExtJs.

Actualmente estoy probando diferentes técnicas de identificación de objetos que identifican los elementos web de la mejor manera.

Nos gustaría utilizar las herramientas de desarrollador de IE (F12) para resaltar y seleccionar objetos DOM en la página, y (de alguna manera) obtener su componente ExtJs correspondiente (junto con sus propiedades correspondientes, como itemId).

¿Es posible hacerlo a través del código o mediante alguna otra técnica?

Answer 1

Creo que si establece la propiedad de Id. En lugar de la Id. De artículo, puede lograr el resultado deseado, ya que se transfiere como la propiedad id. Html del contenedor de nivel superior para el componente (¡creo!). Sin embargo, es un poco complicado hacer que funcione con precisión, dada la cantidad de divs / tables anidados que se usan en la mayoría de los componentes extjs. ¡Buena suerte!

Answer 2

Es difícil decir lo que está buscando, pero si está tratando de obtener una referencia a un Ext.Component que se representa, puede buscar el nodo contenedor para su componente en la estructura HTML. El ID HTML es el mismo que el ID del componente. Si ejecuta var comp = Ext.getCmp(''some-id-12345'') y si eso Ext.Component algo, ha encontrado el contenedor para un Ext.Component .

Entonces podrías usar

comp.itemId 

Para recuperar el itemID

Deberías consultar http://www.illuminations-for-developers.com/ Un complemento para firebug que muestra Ext.Components.

También puede usar el Analizador de Página Sencha para ver todo el árbol de componentes

Answer 3

No estoy familiarizado con las herramientas de IE Dev para tales cosas, sin embargo, puedo intentar responder a la orientación de componentes específicos y sus elementos.

Puede orientar los componentes Ext de varias formas:

1. Ext.ComponentQuery.query(CQselector) ( vea los documentos para ejemplos )
2. Ext.getCmp(componentID) si conoce la identificación del componente
3. métodos up () y down () desde cualquier contenedor / componente. estos también toman expresiones CQselector

Se puede acceder a cualquiera de estos métodos desde la página desde que se carga la biblioteca Ext. En navegadores como FF y Chrome, puede ejecutar estos métodos directamente desde la consola. Supongo que deberían estar disponibles en las herramientas IE Dev.

Una vez que tenga referencia al componente Ext, puede obtener elementos HTML a través de .dom o .el o propiedades similares. O puede usar la consulta Dom directamente.