2012-11-05 4 views
3

ExtJs를 사용하여 작성된 웹 응용 프로그램 용 웹 기반 자동화 솔루션을 개발하고 있습니다.DOM 요소 ID를 ExtJs 구성 요소로 되돌리기

현재 가장 좋은 방법으로 웹 요소를 식별하는 다양한 개체 식별 기술을 테스트하고 있습니다.

IE 개발자 도구 (F12)를 사용하여 페이지에서 DOM 개체를 강조 표시하고 선택하고 해당하는 ExtJs 구성 요소 (itemId와 같은 해당 속성과 함께)를 가져옵니다.

코드를 통해 또는 다른 기술을 통해 수행 할 수 있습니까?

+0

예, 당신의 대답은 속임수를 썼는지를 확인하기 위해 Sencha Page Analyzer를 사용할 수 있습니다. DOM Id를 가진 GetCmp는 필자가 필요로하는 컴포넌트에 대한 참조를 내게 주었다. –

답변

6

IE Dev 도구에 익숙하지 않지만 특정 구성 요소와 해당 요소를 대상으로 대답 할 수 있습니다.

여러 가지 방법을 통해 내선 구성 요소를 타겟팅 할 수 있습니다 :

  1. Ext.ComponentQuery.query(CQselector) 방법 (see docs for examples)
  2. Ext.getCmp(componentID) 당신은 구성 요소 ID
  3. 최대()와 아래() 모든 컨테이너/구성 요소에서 방법을 알고있는 경우. 이것들은 또한 CQselector 표현식을 취합니다.

Ext 라이브러리가로드되었으므로이 메소드 중 하나라도 페이지에서 액세스 할 수 있습니다. FF 및 Chrome과 같은 브라우저에서는 콘솔에서 직접 이러한 메소드를 실행할 수 있습니다. 나는 IE Dev 툴에서 비슷하게 추측하고있다.

Ext 구성 요소에 대한 참조가 있으면 .dom 또는 .el 또는 유사한 속성을 통해 HTML 요소를 가져올 수 있습니다. 아니면 Dom query을 직접 사용할 수도 있습니다.

0

itemId 대신 id 속성을 설정하면 구성 요소에 대한 최상위 컨테이너의 html id 속성으로 전달되므로 원하는 결과를 얻을 수 있다고 생각합니다. 대부분의 extjs 구성 요소에서 사용되는 중첩 된 div/테이블의 양을 감안할 때 정확성을 유지하려면 약간 복잡합니다. 행운을 빕니다!

+0

ID를 사용하여 참조를 얻는 것은 정말 나쁜 생각입니다. 위젯이 매우 밀접하게 결합됩니다. –

0

원하는 정보를 말하기는 어렵지만 렌더링 된 Ext.Component에 대한 참조를 얻으려면 HTML 구조에서 구성 요소의 래퍼 노드를 찾을 수 있습니다. HTML id는 구성 요소 ID와 동일합니다. var comp = Ext.getCmp('some-id-12345')을 실행하고 그 결과를 반환하는 경우 Ext.Component에 대한 래퍼를 찾았습니다.

그런 다음 항목 ID

당신은 http://www.illuminations-for-developers.com/에 Ext.Components을 보여줍니다 불을 지르고위한 플러그인을 보일 것를 검색하려면

comp.itemId 

를 사용할 수 있습니다.

은 또한 전체 구성 요소 트리

관련 문제