Sencha Ext JS6의 트리 목록 2

Sencha Advent Calendar 2015 제23일
http://www.adventar.org/calendars/1041
나무 명단을 만지작거리다
안녕하세요.xenophy의 간정입니다.
어제 못 만났어요.오늘도 어제와 같이 나무에 대한 리스트를 계속 쓰세요.
지난번까지 트리 목록의 표시와 마이크로모드의 전환이 완료되었습니다.
오늘은 나무 목록의 완성으로 다음과 같은 개조를 진행한다.

트리 목록의 기본 색상 설정

정상 모드와 "micro"모드를 전환할 때의 느슨함을 제거

트리 목록의 기본 색상 설정하기
오늘은 주로 트리 목록의 외관 부분을 수정합니다.
ExtJS의 스타일은sass로 쓰기 때문에 트리 목록을 위해sass 파일을 만들었습니다
나는 거기에 양식을 기입할 것이다.
sass의 파일은 다음 디렉터리에 있습니다.~/extjs-6-treelist/classic/sass/src/view/navigation/Main.scsssass 파일은 View에 배치된 디렉토리에 해당합니다.
이번에는 아래 트리 리스트의 뷰 목록에 sass의 느낌을 추가했다.~/extjs-6-treelist/classic/src/view/navigation/Main.js변량
그럼 바로 사스 쓰세요.
우선 트리 목록의 기본 색을 결정합니다.
다음 파일을 만들고sass에 사용할 변수를 설명합니다.
이번에는 트리 목록에서 기본 색과 텍스트 색을 발표했습니다.
파일 이름: ~/extjs-6-treelist/classic/sass/var/Application.scss출처:

  // ツリーリストのベースになる色
  $navigation-base-color: #242925;

  // ツリーリストのテキストの色
  $navigation-text-color: #32e53b;

사이드바 패널 색상
다음은 어제 비어 있던 아래sass에 사이드바 패널의 색 설정을 추가합니다.
사이드바의 색은 트리 목록의 바탕색과 같습니다.
파일 이름: ~/extjs-6-treelist/classic/sass/src/view/main/Main.scss출처:

  .sidebar > .x-panel-body {
    background-color: $navigation-base-color;
  }

원래 트리 목록의 View와 이 사이드바의 패널은
같은 서류ui로 정리해야 하는데 눈치채기에는 이미 늦었다.

트리 목록 색상
다음은 방금 만든 트리 목록의sass 파일에 다음 내용을 추가합니다.
각 부분의 지정은 대체로 댓글에 적혀 있으니 확인해 주세요.
작은 변수는 기본 색상과 over 색상이 마우스를 위로 이동할 때의 색상이라는 뜻입니다.selected는 선택한 색상 형태입니다.
이번에 바탕색에 위에서 설정한 변수의 색을 지정하여 선택할 때 그곳에서 약간 밝게 선택하였다
마우스를 위로 움직일 때 더욱 밝아지고, 나무의 층을 열 때 상반된다
바탕색에서 진한 색까지.
파일 이름: ~/extjs-6-treelist/classic/sass/src/view/navigation/Main.scss출처:

  @include treelist-ui(
    $ui: 'navigation',

    // 通常モードの設定
    $background-color: $navigation-base-color,
    $row-over-background-color: lighten($navigation-base-color, 20%),
    $row-selected-background-color: lighten($navigation-base-color, 10%),

    // microモードの設定
    $toolstrip-background-color: $navigation-base-color,
    $tool-selected-background-color: lighten($navigation-base-color, 10%),

    // 階層を開けている時の背景色
    $item-expanded-background-color: darken($navigation-base-color, 10%),

    // リスト内の項目
    $item-text-color: $navigation-text-color,
    $item-text-over-color: lighten($navigation-text-color, 20%),

    // リストアイコン
    $item-icon-color: $navigation-text-color,
    $item-icon-over-color: lighten($navigation-text-color, 20%),

    // 開閉アイコン
    $item-expander-color: $navigation-text-color,
    $item-expander-over-color: lighten($navigation-text-color, 20%)
  );

View에 적용
sass를 쓴 후, 그 반 이름과 ui 이름을View로 지정합니다.
각각 아래와 같이 설정한다.
사이드바 패널 설정은 아래와 같다cls

{
    // サイドバー部分のパネル
    xtype   : 'panel',
        region  : 'west',
    width   : 300,
    name    : 'sidebar',
    cls     : 'sidebar',
    items   : [{
        xtype: 'navigation'
    }]
});

트리 목록 설정은 다음과 같습니다ui

Ext.define('ExtJs6TreeList.view.navigation.Main', {
    extend: 'Ext.list.Tree',
    xtype: 'navigation',

    requires: [
        'ExtJs6TreeList.view.navigation.MainController',
        'ExtJs6TreeList.view.navigation.MainModel',

        'ExtJs6TreeList.store.Navigation'
    ],

    store: {
        type: 'navigation'
    },

    ui: 'navigation'
});

구축
ss를 수정한 후 구축이 필요하기 때문에 아래 명령을 두드려야 합니다.
다음sass 편집 후 화면 확인 전에 매번 진행하세요.
% sencha app build화면 표시
여기까지 하면 일단 화면에서 확인해 봐.
sass로 설정한 결과 이런 색입니다.
초기 상태에 비해 패턴 간의 통일감과 동작의 이완도가 있다.

일반 모드와 "micro"모드 전환 시 느슨함 제거
위의 그림을 봐도 알 수 있지만, 지금은 각자의 모드를 바꿀 때
틈새 없는 교체가 보이지 않습니다.
이유는 일반 모드에서 왼쪽에 계층의 개폐 아이콘이 표시되기 때문이다
오른쪽을 가리기 때문에 왼쪽과 꼭 붙는'마이크로'모드
목록이 표시되는 위치가 다르기 때문이다.
오른쪽 스위치 아이콘
우선 위치를 잘못 열어야 하는 이유의 스위치 아이콘을 오른쪽으로 돌려주세요.
트리 목록의sass에 스타일을 추가합니다:.ui의 변수에서 이러한 설정을 찾지 못했기 때문에 일반적인sass 형식으로 씁니다.
참고로 다음 선택기ui에는 navigation라는 이름이 있습니다.
트리 목록에는 x-treelist-navigation라는 범주가 자동으로 포함됩니다.

  @include treelist-ui(
    $ui: 'navigation',
  ~省略~
  );

  .x-treelist-navigation {
    // 開閉アイコンの位置を左から右へ
    .x-treelist-item-expander {
      left: auto;
      right: 0;
    }
  }

그리고 먼저 스위치 아이콘을 오른쪽으로 하세요.

아이콘 및 텍스트 왼쪽으로 이동
스위치 아이콘이 오른쪽에 있기 때문에 목록 왼쪽에 공백이 있습니다.
나는 이곳을 마이크로모드의 위치로 압축하고 싶다.
sass에 아이콘과 텍스트 표시 위치를 변경하는 설정을 추가합니다.

  .x-treelist-navigation {
    // 開閉アイコンの位置を左から右へ
    .x-treelist-item-expander {
      left: auto;
      right: 0;
    }

    // テキストを左に寄せる 40pxから25pxへ
    .x-treelist-item-text {
      margin-left: 25px;
    }

    // リストアイコンの余白を無くす
    .x-treelist-item-icon {
      left: 0;
    }
  }

여기서 모드를 다시 정렬합니다.
일반 모드의 목록 덕분에 왼쪽으로
아이콘의 위치가 동일해지면 전환이 빈틈없어 보입니다!

덤
이 정도면 많이 완성됐지만 마지막으로 외관을 조금만 더 높여보도록 하겠습니다.
내가 해볼게.
고칠 곳은 리스트에 기록이 좁아서 좀 더 올려야 해요
선택한 기록을 쉽게 이해하려면 옆에 선을 그으십시오.
트리 목록ui에 다음 변수를 추가합니다.

  @include treelist-ui(
    $ui: 'navigation',
  ~省略~
    // 操作しやすくなるようレコードを高くする
    $item-line-height: 50px,

    // 通常モードのマウスオーバー時と選択時に横にラインを出す
    $row-indicator-width: 3px,
    $row-indicator-selected-color: $navigation-text-color,
    $row-indicator-over-color: lighten($navigation-text-color, 10%),

    // microモードのマウスオーバー時と選択時に横にラインを出す
    $tool-float-indicator-width: 3px,
    $tool-float-indicator-color: lighten($navigation-text-color, 10%),
    $tool-indicator-selected-width: 3px,
    $tool-indicator-selected-color: $navigation-text-color
  );

아래와 같이 표시됩니다.
나는 아까보다 조금 더 예뻐졌다고 생각한다.
어때?네비게이션 같아?

조금 더 높으면 더 멋있을지도 몰라요.

최후
어제랑 오늘 이틀 동안 나무에 대한 리스트를 썼어요.
이번 터치파트 말고도 할 수 있는 게 많아요.
관심 있는 사람은 이것저것 만져서 실험을 진행할 수 있다.
참고로 Ext JS6Ext.list.Tree의 문서에는 상술한 css-mixin의 기술이 없습니다.
나는 SDK의 소스를 보면서 만졌다.
이번 응용 프로그램은 다음 파일 treelist-ui 의 부분입니다.~/extjs-6-treelist/ext/packages/core/sass/src/list/TreeItem.scss그리고 이번에는 사용하지 않았지만, 문서에 있는 "Events"에는 왜 높이와 너비가 변할 때의 활동만 적혀 있는지 모르겠다
리스트를 고를 때 이벤트를 어떻게 하면 좋을까 해서 빠져버렸어요.
이것도 SDK js의 출처'selectionchange'를 봤기 때문이다fireEvent아래처럼 이렇게 들려주면 동작이 좋아요.

listeners: {
    selectionchange: 'onSelectionChange'
}

총결산은 아무래도 잘 모르겠다.
이상은 트리 목록입니다.
읽어주셔서 감사합니다.
그럼 내년(?)메리 크리스마스!새해 복 많이 받으세요!!: