首页 新闻 搜索 专区 学院

请教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>

huajian168的主页 huajian168 | 初学一级 | 园豆:5
提问于:2011-03-09 10:34
< >
分享
最佳答案
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
邀月 | 高人七级 |园豆:25375 | 2011-03-09 16:26
可不可以不用div,我直接使用的脚步就解决了,明天我跑一下你的程序,没有问题的话把分给你,谢谢你的关注,很感谢。
huajian168 | 园豆:5 (初学一级) | 2011-03-09 18:17
@huajian168:这两个div只是个容器,起个占位作用。代码我已经试过。
邀月 | 园豆:25375 (高人七级) | 2011-03-09 18:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册