|

該組件有兩種使用方式,一是擴展方式,二是復寫方式。其中第一種方式需要引入附件中的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屬性時需要的兩個滾動按鈕圖片
打包下載
JavaScript技術:ExtJS擴展 垂直tabLayout實現代碼,轉載需保留來源!
鄭重聲明:本文版權歸原作者所有,轉載文章僅為傳播更多信息之目的,如作者信息標記有誤,請第一時間聯系我們修改或刪除,多謝。