2012-04-13 5 views
4

하나의 헤더 아래에 여러 열이있는 눈금을 만들 수 있습니까?ExtJs : 여러 열에 대해 하나의 열 헤더

 
+-----------------------+-----------------------+ 
|  Column 1  | Column 2,3,4  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------------------------------+ 

열 머리글 그룹화를 시도했지만 하위 열을 숨길 방법이 없습니다. 그러면 다음과 같이 보일 것입니다.

 
+-----------------------+-----------------------+ 
|  Column 1  | Column 2,3,4  | 
+      +-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------+-----------------------+ 
|      |  |  |  | 
+-----------------------------------------------+ 

답변

1

이 항목은 무시가 필요합니다.

columns: [ 
    { 
     text: "Column 1", 
     // width, other settings 
    }, 
    { 
     text: "Columns 2, 3, 4", 
     // width is computed as sum of child columns 
     columns: [ 
      { 
       text: "", 
       columnName: "Column 2", // custom config 
       width: // needed 
      }, 
      { 
       text: "", 
       columnName: "Column 3", 
       width: // needed 
      }, 
      { 
       text: "", 
       columnName: "Column 4", 
       width: // needed 
      } 
     ] 
    } 
] 

참고 API의 일부가 아닌 columnName CONFIGS를 : 여기에 귀하의 열 설정이 어떻게 보일지입니다. 그것은 내가 이것을 보상 한 것입니다.

설정 text: ""은 해당 열의 헤더를 숨 깁니다. 3 개의 하위 열 모두에 대해이 열을 설정하면 전체 행이 숨겨 지지만 헤더가있는 2px의 얇은 선이 남습니다. 그것을 제거하는 방법을 모르겠습니다. CSS를 버릴 수도 있습니다.

이렇게하면 원하는 레이아웃을 얻을 수 있습니다. 기본 열의 메뉴를 통해 하위 열을 숨길 수 있습니다. 그러나 텍스트가 없기 때문에 메뉴가 올바르게 표시되지 않습니다. 그것이 columnName이 들어있는 곳입니다.

Ext.grid.header.Container#getColumnMenu의 출처를 찾으십시오. 이 함수 만 재정의해야합니다. 여기가는 방법 : 그것을 사용하지 않는 기존 열 영향을주지 않고있는 경우

Ext.override(Ext.grid.header.Container, { 
    getColumnMenu: function(headerContainer) { 
     // stuff 
     for (; i < itemsLn; i++) { 
      item = items[i]; 
      menuItem = Ext.create("Ext.menu.CheckItem", { 
       text: item.columnName || item.text // <--- IMPORTANT LINE 
     // rest of the function is the same 
    } 
}); 

이것은 당신의 columnName 설정을 선택합니다. 이제 다중 열에 대한 헤더 트리거를 클릭하면 하위 열에 중첩 된 옵션이 표시됩니다. 당신이 궁금해지기를 원한다면, 당신은 좀 더 오버라이드를 통해 숨기기 옵션을 평평하게 할 수 있어야하지만, 나는 당신에게 그것을 맡길 것이다.

참고 :이 기능은 모두 Ext JS 4.0.7에서 테스트되었습니다. 4.1 릴리스 후보의 헤더 컨테이너 코드에는 몇 가지 큰 변경이 있었으며 동일한 방식으로 작동 할 것이라고 보장 할 수 없습니다.

관련 문제