ExtJS 확장 수직 tabLayout 구현 code_extjs

그런데 ExtJS의 TabPanel은 가로로만 표시가 되네요. Ext 포럼을 검색해보니 세로 TabLayout의 확장이 있는데 세로 탭의 탭 내용이 가로로 표시되고, 탭이 너무 많아도 표시가 되지 않습니다. EnableScroll 속성을 설정하여 활성화할 수 있습니다. 프로젝트의 요구 사항을 충족하기 위해 세로 탭 표시를 지원하고 탭이 많을 때 탭 스크롤을 지원하도록 TabLayout을 확장했습니다. 효과는 다음과 같습니다.

이 구성 요소를 사용하는 방법에는 두 가지가 있습니다. 하나는 확장 방법이고 다른 하나는 복사 방법입니다. 첫 번째 방법은 첨부 파일에 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',
항목: [
bb = new Ext.Panel({layout:'fit',
title:'기본 정보',
iconCls:'aaa',
closable: true,
html : '기본 정보'
}),cc = new Ext.Panel({layout:"fit",
title:"기본 정보",
closable: true,
html: '기본정보'
})]
});

두 가지 사용방법은 동일한 효과를 가지며, tabPosition 속성은 위쪽/오른쪽/아래쪽/왼쪽을 동시에 지원합니다. .

첨부 파일 설명:
TabPanel.js는 Ext.TabPanel을 확장합니다.
TabPanel2.js는 Ext.TabPanel의 관련 메서드를 재정의합니다.
이 기사의 구성 요소에 사용되는 ext-patch.css CSS
*.gif는 활성화Scroll 속성이 설정된 경우 필요한 두 개의 스크롤 버튼 이미지입니다
패키지 및 다운로드