ExtJS 확장: 세로 탭패널

최근에 프로젝트를 할 때 프로젝트에서 ExtJS를 사용했는데 일부 내용은 페이지 서명으로 표시해야 하는데 프로젝트의 요구 때문에 페이지 서명은 수직으로만 분포할 수 있지만 ExtJS의 탭패널은 수평으로만 표시할 수 있습니다. Ext포럼을 검색해 보니 수직 탭패널의 확장이 있지만 수직 탭의 페이지 서명 내용은 수평으로 표시되고 페이지 서명이 많으면 enableScroll 속성을 설정해서 스크롤할 수 없습니다. 프로젝트의 수요에 적응하기 위해서입니다.저는 탭패널을 확장해서 수직 페이지 표시를 지원하고 페이지 표시가 많을 때 스크롤을 지원합니다.효과는 다음과 같습니다.
[img]/upload/attachment/117415/219b1e83-a13b-3d49-b0f1-79047fd68353.gif[/img]
이 구성 요소는 두 가지 사용 방식이 있는데, 하나는 확장 방식이고, 다른 하나는 복사 방식이다.이 중 첫 번째 방법은 첨부 파일의 TabPanel을 도입해야 합니다.js 및 ext-patch.css, 동시에 두 개의 그림을 ext-patch에 놓아야 합니다.css와 디렉터리에서 구성 요소를 만들 때 Ext.ux를 만들어야 합니다.TabPanel;
예:

aa = new Ext.ux.TabPanel({
        tabPosition: 'left',
        autoScroll: true,
        deferredRender: false,
        activeTab: 0,
        enableTabScroll: true,
        applyTo: 'aaa',
        items: [
            bb = new Ext.Panel({layout:'fit',
                title:' ',
                iconCls:'aaa',
                closable: true,
                html: ' '
            }),cc = new Ext.Panel({layout:"fit",
                title:" ",
                closable: true,
                html: ' '
            })]
    });

두 번째 방법은 첨부 파일의 TabPanel2를 도입하는 것입니다.js 및 ext-patch.css, 동시에 두 개의 그림을 ext-patch에 놓아야 합니다.css와 같은 디렉터리에서 구성 요소를 만들 때 Ext.TabPanel을 만들어야 합니다.
예:

aa = new Ext.TabPanel({
        tabPosition: 'left',
        autoScroll: true,
        deferredRender: false,
        activeTab: 0,
        enableTabScroll: true,
        applyTo: 'aaa',
        items: [
            bb = new Ext.Panel({layout:'fit',
                title:' ',
                iconCls:'aaa',
                closable: true,
                html: ' '
            }),cc = new Ext.Panel({layout:"fit",
                title:" ",
                closable: true,
                html: ' '
            })]
    });

두 가지 사용 방식은 효과가 같고tabPosition 속성은 top/right/bottom/left를 동시에 지원합니다.
첨부 파일 설명:
TabPanel.js Ext.TabPanel 확장
TabPanel2.js 복사 Ext.TabPanel의 관련 방법
ext-patch.css 본문 구성 요소에 사용되는 css
*.gif가 enableScroll 속성을 설정할 때 필요한 두 개의 스크롤 단추 그림