ExtJS 拡張機能の垂直タブレイアウトの実装 code_extjs

しかし、ExtJS の TabPanel は横方向にしか表示できません。Ext フォーラムを検索したところ、縦方向の TabLayout の拡張機能はありましたが、縦方向のタブのタブ内容は横方向に表示され、タブが多すぎても表示されません。 Scroll 属性を設定することで有効になります。プロジェクトのニーズを満たすために、垂直タブ表示をサポートし、タブが多い場合のタブのスクロールをサポートするように TabLayout を拡張しました。効果は次のとおりです。

このコンポーネントを使用するには 2 つの方法があります。1 つは拡張メソッド、もう 1 つはコピー メソッドです。最初の方法では、添付ファイルに TabPanel.js と ext-patch.css を導入する必要があります。同時に、コンポーネントを作成するときに、2 つのイメージを 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 ',
closeable: true,
html: '基本情報'
}),cc = new Ext.Panel({layout:"fit",
title:"基本情報",
closeable: true,
html: '基本情報'
})]
});

2 番目の方法では、TabPanel2.js と ext-patch の導入が必要です。 css を添付ファイルに追加し、2 つの画像を 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',
closeable: true,
html : '基本情報'
}),cc = new Ext.Panel({layout:"fit",
title:"基本情報",
closeable: true,
html: '基本情報 '
})]
});

2 つの使用方法は同じ効果があり、tabPosition 属性は同時に top/right/bottom/left をサポートします。

添付ファイルの説明:
TabPanel.js は Ext.TabPanel を拡張します
TabPanel2.js は Ext.TabPanel の関連メソッドをオーバーライドします
ext-patch.css この記事のコンポーネントで使用される CSS
*.gif は、enableScroll 属性が設定されている場合に必要な 2 つのスクロール ボタン画像です
パッケージ化してダウンロード