Sencha Ext JS6의 트리 목록 중 하나

Sencha Advent Calendar 2015 22일째
http://www.adventar.org/calendars/1041
트리 목록 쓰다듬기
안녕하세요.xenophy의 간정입니다.
오랜만입니다.이번 부가 달력도 막바지에 이르렀다.
자기 차례면 두 번 더 있어.
advent 달력이 끝나면 올해도 끝난다.왠지 빨라.
그러면 오늘부터 내일까지 Ext JS6 추가 구성 요소를 개인적으로 사용했습니다.
나는 트리 명단Ext.list.Tree 코드를 만지면서 사용법을 간단하게 소개하고 싶다.
트리 목록 정보
ExtJS의 나무라면 원래 나무 패널이 있다.
저기 격자 패널처럼 나무 옆에 열을 추가할 수 있어요.
리프 페이지에 체크 상자를 추가하거나 트리 보기에서 확장할 수 있습니다.
이번에 소개한 나무 리스트는 정말 나무 모양의 리스트일 뿐입니다.
제작이 매우 간단하기 때문에 내비게이션 기능을 설치하기에 적합하다.
그 밖에 트리 목록은 트리 패널에 없는 기능을 가지고 있다
미크로 모드라고 불리는 게 있어요.
이 "마이크로"모드에서 트리 목록은 아이콘만 표시합니다
목록의 폭을 줄일 수 있기 때문에 내비게이션 기능을 줄일 수 있다
아주 간단하게 실현할 수 있다.
그래서 오늘은 이 나무 목록으로 내비게이션의 기초를 만들겠습니다.
오늘의 목표는 트리 패널의 디스플레이와 '마이크로'모드 전환 부분을 실현하는 것입니다.
먼저
새 Ext JS6 응용 프로그램입니다.
% sencha -sdk ~/Library/Sencha/ext-6.0.1/ generate app ExtJs6TreeList extjs-6-treelist

센카 Cmd와 SDK의 자세한 내용은 여기에 설명되지 않았다.다른 날 기사를 참고할 수 있을 것 같아요!

Sencha Cmd에서 로컬 서버 시작
% sencha web start
ExtJS6의 새 응용 프로그램 화면이 표시되는지 확인합니다.
간격
먼저 새로 만든 응용 프로그램 화면에 머리글, 사이드바 및 화면 프레임 만들기
각자 제작하다.

이번에 내비게이션을 표시하는 것은 사이드바 부분이다.

생성된 디렉터리에 따라 파일 이름이 ~/extjs-6-treelist/classic/src/view/main/Main.js 있습니다
이것을 기초로 개조해라.

이번 모델 생략.트리 목록 자체도modern을 지원합니다.　

이것Main급이 계승Ext.tab.Panel되어 일반 판넬을 사용합니다.
그리고 각 디자인은 가로 스트라이프로 커팅되어 있습니다.
이외에 필요하지 않은 config도 많습니다. 아래와 같습니다.
출처

Ext.define('ExtJs6TreeList.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',

        'ExtJs6TreeList.view.main.MainController',
        'ExtJs6TreeList.view.main.MainModel'
    ],

    controller: 'main',
    viewModel: 'main',

    // ボーダーレイアウト
    layout: 'border',

    // パネル全体に枠線を出す
    defaults: {
        frame: true
    },

    items: [{
        // ヘッダー部分のパネル
        xtype   : 'panel',
        region  : 'north',
        height  : 50,
        name    : 'header',
        html    : 'ヘッダー'
    }, {
        // サイドバー部分のパネル
        xtype   : 'panel',
        region  : 'west',
        width   : 300,
        name    : 'sidebar',
        html    : 'サイドバー'
    }, {
        // スクリーン部分のパネル
        xtype   : 'panel',
        region  : 'center',
        name    : 'screen',
        html    : 'スクリーン'
    }]
});

스크린
트리 목록 보기 드디어 주인공이 등장했다. 현재 생성된 사이드바 패널에 트리 목록 보이기 상속 트리 목록의 View를 생성합니다. 트리 스토리지 생성 우선 트리에 표시된 데이터 트리 저장을 다음과 같이 만듭니다. 아무래도 계층이 된 데이터를 알 수 있을 것 같아서요. 'x-fa-dashboard' 에서 목록 옆에 표시되는 아이콘을 지정합니다. 이 지정은 트리 패널에도 적용됩니다. 파일 이름: ~/extjs-6-treelist/app/store/Navigation.js 출처: Ext.define('ExtJs6TreeList.store.Navigation', { extend: 'Ext.data.TreeStore', alias: 'store.navigation', root: { expanded : true, children : [{ text: 대시보드, iconCls : 'x-fa fa-dashboard', leaf : true }, { text: "일간지", iconCls : 'x-fa fa-edit', leaf : true }, { text:'관리', iconCls : 'x-fa fa-gears', expanded : true, children : [{ text: 계정, iconCls : 'x-fa fa-users', leaf : true }, { text:'소개', iconCls : 'x-fa fa-user', leaf : true }, { text: 권한, iconCls : 'x-fa fa-bolt', leaf : true }] }] } }); 트리 목록 만들기 트리 목록은 MVM으로 구성됩니다. 내용이 매우 간단하고 단순한 Ext.list.상속Tree 단지 데이터 원본에 상술한 상점을 지정했을 뿐이다. xtype은 "navigation"입니다. View 파일 이름: ~/extjs-6-treelist/classic/src/view/navigation/Main.js 출처: 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' } }); ViewModel 파일 이름: ~/extjs-6-treelist/app/view/navigation/MainModel.js 출처: Ext.define('ExtJs6TreeList.view.navigation.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.navigation' }); ViewController 파일 이름: ~/extjs-6-treelist/app/view/navigation/MainController.js 출처: Ext.define('ExtJs6TreeList.view.navigation.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.navigation' }); Main 수정 ~/extjs-6-treelist/classic/src/view/main/Main.js 파일을 수정합니다. 먼저 Requires의 정렬에서 만들어진 트리 목록의 클래스 ExtJs6 TreeList입니다.view.navigation.Main을 추가합니다. 그리고 사이드바의items에서 트리 목록의 xype을 지정합니다.사이드바가 삭제됩니다. { // 사이드바 섹션의 패널 xtype : 'panel', region : 'west', width : 300, name : 'sidebar', items : [{ xtype: 'navigation' }] } 정신을 차리다 Main에 트리 목록의 클래스를 추가했기 때문에 sencha app refresh로 클래스의 링크를 업데이트합니다. % sencha app refresh 스크린 위에서 수정한 화면을 표시하면 트리 목록이 표시됩니다. 트리 목록의 "micro" 모드 만약 이 정도까지 할 수 있다면 이번 목표는 달성될 것이다.그리고 하나 더. "micro" 모드에 사용할 체크 상자를 설정합니다 트리 목록을 '마이크로'모드의 체크 상자로 설정합니다. 주 제어의 머리글 패널을 (으)로 수정합니다. { // 헤드 패널 xtype : 'panel', region : 'north', height : 50, name : 'header', items : [{ // "micro" 모드로 전환하는 체크 상자 xtype : 'checkboxfield', boxLabel : 'change micro mode', name : 'changeMicroMode', handler : 'onChangeMicroMode' }] } 다음에 체크 상자를 검사할 때 "micro" 모드가 되고 싶어서 Main의 View Controller에서 다음 이벤트 처리 프로그램을 실행합니다. 메서드의 이름은 View handler에서 지정한 onChange MicroMode입니다. 이 방법에서 트리 목록을 얻는 View는 setMicro를 사용하는 방법입니다 '미크로'모드와 일반 모드의 전환을 진행하고 있습니다. 이제 각 모드에서 사이드바 패널의 너비를 전환합니다. Ext.define('ExtJs6TreeList.view.main.MainController', { extend: 'Ext.app.ViewController', alias: 'controller.main', onChangeMicroMode: function(cb, checked) { var me = this, view = me.getView(), navigation = view.down('treelist[xtype=navigation]'), sidebar = view.down('panel[name=sidebar]'); // "micro" 모드 전환 navigation.setMicro(checked); // 사이드바 패널의 너비 전환 sidebar.setWidth(checked ? 36 : 300); } }); 여기까지 와서 마지막으로 sencha app build로 화면을 보여주고 싶어요. 현재 상태를 유지하면 구축 오류가 발생할 수 있습니다. 그리고 아마 구축하지 않으면 복선상자 스타일이 맞지 않을 거예요. 빌드 오류가 발생한 이유는 레이블 패널이었던 Main의 View를 일반 패널로 변경했기 때문입니다. 원래 새로 제작되었을 때 라벨 패널을 향한sass의 기술이 남아 있었기 때문이다. 따라서 ~/extjs-6-treelist/classic/src/view/main/Main.scss 내용을 삭제하고 구축합니다. % sencha app build 보기 마지막으로 화면을 '마이크로'모드로 보여 줍니다. "micro" 모드를 표시할 수 있습니다!사이드바 패널도'미크로'모드에 맞춰 좁아졌다. 다음 회 예고 대상 트리 목록을 표시하고 "micro" 모드를 전환할 수 있습니다. 다만 지금 이러면 계층과 상관없이 모두 평탄한 표시일 뿐이다 왜냐하면 보통 모드와 "micro" 모드의 아이콘의 위치가 다르기 때문이다 전환하면 동작이 부자연스러워 보일 수 있다. 내일은sass를 위주로 이 부근의 외관을 맞춤 제작해 보세요.