extjs tree 예제

또는 경로는 트리의 기존 노드에서 시작하여 상대적일 수 있습니다. 주: 도구 모음에 필드 구성 요소가 포함될 수 있지만 상위 FormPanel의 부하에 의해 업데이트되지는 않습니다. 패널의 도구 모음은 표준 컨테이너->구성 요소 계층 구조의 일부가 아니므로 양식 항목을 수집하기 위해 검색되지 않습니다. 그러나 양식 제출 매개 변수는 DOM 트리에서 수집되므로 값이 제출됩니다. 보다 복잡한 XTemplate를 기반으로 하는 도구에 대한 사용자 지정 DOM 구조를 제공하기 위해 재정의할 수 있습니다. 템플릿의 데이터는 도구에 지정된 단일 도구 구성 개체(전체 배열이 아님)입니다. 다음 예제에서 태그는 도구 위로 마우스를 가져 갈 때 시각적 표시를 제공하는 데 사용됩니다: 참고: 이 구성은 앵커 레이아웃 (또는 그 하위 클래스)을 사용하도록 구성된 컨테이너에서 이 구성 요소를 렌더링할 때만 사용됩니다. 관리자, 예를 들어: 그리고 우리가 볼 수 있듯이, 코드는 간단한 트리에 대 한 동일: 지금, Ext JS에서 동일한 트리를 선언 하는 방법을 보자: 사용자 지정 아이콘 클래스를 지정 하는 예제는 다음과 같습니다: 그것은 또한 열 정의 되지 않은 경우 주목할 가치가 있다 에서 트리는 데이터인덱스가 `텍스트`로 설정된 하나의 트리컬럼을 자동으로 만듭니다. 또한 트리의 헤더를 숨깁니다. 단일 열만 사용할 때 이 헤더를 표시하려면 hideHeaders 구성을 false로 설정합니다. 트리를 특정 노드의 경로로 확장한 다음 뷰로 스크롤합니다.

위의 예제에서도 사용자 지정 태그 및 스타일지정이 적용된 바닥글도 명시적으로 만듭니다. 트리 구성 요소는 Ext JS 4에서 훨씬 더 단순화됩니다. 그리드와 마찬가지로 Ext.panel.Table의 하위 클래스이기도 합니다. 즉, 트리에 그리드의 대부분의 기능을 추가할 수도 있습니다. 트리의 Ext.tree.View는 표시되는 노드의 병합된 보기인 {Ext.data.NodeStore NodeStore}에 의해 구동됩니다. NodeStore는 노드가 추가, 제거 또는 확장될 때 노드의 가시성 상태를 반영하도록 동적으로 업데이트됩니다. UI는 NodeStore에서 발생한 돌연변이 이벤트에 응답합니다. rootVisible 속성을 false로 설정하면 루트 노드가 시각적으로 제거됩니다. 이렇게 하면 루트 노드가 자동으로 확장됩니다.

다음 이미지는 루트Visible가 false로 설정하고 선이 false로 설정된 동일한 트리를 보여 주며 선은 false로 설정됩니다. 다른 속성도 구성했습니다. 접을 수 있는 부울 속성; true로 설정하면 트리의 노드를 축소하고 확장할 수 있습니다. useArrows는 또한 부울 속성, 화살표 아이콘 트리에 표시 될 지 여부를 나타내는 (확장/축소 아이콘). 속성 rootVisible 는 간단한 기간(.)인 트리의 루트를 표시할지 여부를 나타냅니다. 속성 singleExpand는 한 번에 단일 노드를 확장할지 여부를 나타내고 multiSelect 속성은 한 번에 두 개 이상의 노드를 선택할지 여부를 나타냅니다. 필요한 경우 특정 기본 구성을 재정의할 수 있는 Ext.grid.header.Container의 구성 개체일 수도 있습니다. 예를 들어, 특수 레이아웃은 더 간단한 레이아웃을 사용하도록 재정의되거나 모든 열에서 공유하는 기본값을 설정할 수 있습니다: 일부 ExtJs Component 클래스는 선택한 DOM 이벤트(예: “클릭”, “마우스오버” 등)를 내보내지만, 일반적으로 추가 값이 있을 수 있는 경우에만 수행됩니다. 추가될 수 있습니다.

예를 들어 노드를 통과하는 DataView의 클릭 이벤트가 클릭됩니다. 구성 요소의 HTMLElement에서 직접 DOM 이벤트에 액세스하려면 구성 요소가 렌더링된 후 요소에 리스너를 추가해야 합니다. 플러그인은 이 단계를 단순화할 수 있습니다: 사용자 지정 요소를 구성하는 것은 예를 들어 바디 요소가 기본적으로 만든 것과 다른 형태의 태그를 사용하도록 강제하는 데 사용될 수 있습니다. 이 것의 예는 헤더와 같은 사용자 지정 콘텐츠를 포함하는 자식 패널을 만들거나 본문을 요소로 하여 모든 패널 콘텐츠의 중심을 강제하는 것일 수 있습니다. Mes.