我自己在主頁面jsp上布局了格式,想把他的TabPanel加到自己定義的div中。給出詳細代碼!謝謝
Ext.onReady(function(){
var centerRegion = new Ext.TabPanel({
region : 'center',
margins : '3 3 3 0',//距離top、right、bottom、left邊界的距離,單位為像素
activeTab : 0,
defaults : {
autoScroll : true
},
items : [{
title : '主頁',
html : '內容'
}]
});
centerRegion.render('con');
var westRegion = new Ext.Panel({
title : '導航',
region : 'west',
split : true,
width : 200,
//True表示為面板是可收縮的,並自動渲染一個展開/收縮的輪換按鈕在頭部工具條
collapsible : true,
margins : '3 0 3 3',
cmargins : '3 3 3 3',
layout : 'accordion',
layoutConfig : {
titleCollapse : true,//單擊標題就可以折疊面板
animate : true,//展開的效果
activeOnTop : true//是否可以改變順序
},
items : []
});
new Ext.Viewport({
layout : 'border',
items : [{
region : 'north',
height : 100,
title : '頂部面板'
},
{
region : 'south',
height : 30,
title : '底部面板'
},
westRegion,
centerRegion]
});
});
以上是extjs的布局頁面我只想要他的TabPanel控件,其余都不要
主要就是用renderTo指向div的id就可以了
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
renderTo: "div_tab",
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});
});
<body>
<div id="div_tab" style="background: #D97E27; width:800px;height:500px;">
</div>
</body>