请教Ext高手，指导一下如何才能把tab的按钮加载到左边的菜单栏里，tab的子列表在centerPa
1
悬赏园豆：200
[已解决问题]
解决于 2011-03-10 08:32
备注：button在左边的菜单栏里显示，点击add，在centerpage中出现新添加的tab.
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,
layout:"border",
items:[
{
id:'topPage',
region:"north",
//html: '<h1 class="x-panel-header">Page Title</h1>',
//autoHeight: true,
//border: false,
split: true,
//margins: '0 0 0 0',
collapsible: true,
collapseMode: 'mini',
height:50,
title:"顶部面板"
},{
id:'bottomPage',
region:"south",
collapsible: true,
html: 'Information goes here',
split: true,
height: 50,
title:"底部面板"
},{
id:'centerPage',
region:"center",
title:"中央面板",
items:[
//{title:"面板1",html:"tab面板1的内容"},
// {title:"面板2",html:"tab面板2的内容"}
]
},{
id:'leftPage',
region:"west",
collapsible: true,
collapseMode: 'mini',
split: true,
width:200,
title:"左边面板",
layout: 'accordion',
bodyStyle: {
'background-color': '#eee'
},
defaults: {
border: false
},
items: [
{title: 'Item 1',html: 'Some content'},
{title: 'Item 2',html: 'Some content'},
{title: 'Item 3',html: 'Some content'}
]
},{
id:'rightPage',
region:"east",
width:100,
collapsible: true,
split: true,
title:"右边面板"
}
]
});
});
var tabs = new Ext.TabPanel({
renderTo:'centerPage',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});
//
// tab generation code
var index = 0;
while(index < 7){
addTab();
}
function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}
new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'centerPage');
</script>
最佳答案
0
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoTab01.aspx.cs" Inherits="DemoExtJS_01.Tab.DemoTab01" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>演示tab</title>
<link rel="stylesheet" href="/Scripts/ext/3.2/resources/css/ext-all.css" />
<script type="text/javascript" src="/Scripts/ext/3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/Scripts/ext/3.2/ext-all.js"></script>
<script type="text/javascript" src="/Scripts/ext/3.2/examples/ux/TabCloseMenu.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
new Ext.Viewport({
enableTabScroll: true,
layout: "border",
items: [
{
id: 'topPage',
region: "north",
//html: '<h1 class="x-panel-header">Page Title</h1>',
//autoHeight: true,
//border: false,
split: true,
//margins: '0 0 0 0',
collapsible: true,
collapseMode: 'mini',
height: 50,
title: "顶部面板"
}, {
id: 'bottomPage',
region: "south",
collapsible: true,
html: 'Information goes here',
split: true,
height: 50,
title: "底部面板"
}, {
id: 'centerPage',
region: "center",
title: "中央面板",
items: [
{ contentEl: 'centerPanel', title: '中央面板内容区' }
/////////{title:"面板2",html:"tab面板2的内容"}
]
}, {
id: 'leftPage',
region: "west",
collapsible: true,
collapseMode: 'mini',
split: true,
width: 200,
title: "左边面板",
layout: 'accordion',
bodyStyle: {
'background-color': '#eee'
},
defaults: {
border: false
},
items: [
{ contentEl: 'addPanel', title: '增加Tab' },
{ title: 'Item 1', html: 'Some content' },
{ title: 'Item 2', html: 'Some content' },
{ title: 'Item 3', html: 'Some content' }
]
}, {
id: 'rightPage',
region: "east",
width: 100,
collapsible: true,
split: true,
title: "右边面板"
}
]
});
//
var centerPage = new Ext.TabPanel({
renderTo: 'centerPanel',
resizeTabs: true, // turn on tab resizing
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
width: 600,
height: 250,
defaults: { autoScroll: true },
plugins: new Ext.ux.TabCloseMenu()
});
// tab generation code
var index = 0;
while (index < 3) {
addTab();
}
function addTab() {
centerPage.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ 'DemoTest',
closable: true
}).show();
}
new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls: 'new-tab'
}).render(document.body, 'addPanel');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="addPanel" style="margin: 3px 0;" />
<div id="centerPanel" style="margin: 3px 0;">
</div>
</form>
</body>
</html>
收获园豆：200
可不可以不用div，我直接使用的脚步就解决了，明天我跑一下你的程序，没有问题的话把分给你，谢谢你的关注，很感谢。
@huajian168:这两个div只是个容器，起个占位作用。代码我已经试过。