Ext.onReady(function(){
new Ext.Viewport({ //注意这里是Viewport,NO ViewPort
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north", //顶部面板
height:50,
html:'<h1>网站后台管理系统</h1>'
},
{
title:"菜单",
region:"west", //左边菜单项,有按钮可控制伸缩的
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel", //选项卡
region:"center",
items:[{title:"面板1",html:'<h1>面板1内容</h1>'},
{title:"面板2",html:'<h1>面板2内容</h1>'},
{title:"面板3",html:'<h1>面板3内容</h1>'}]
}
]
});
});
new Ext.Viewport({ //注意这里是Viewport,NO ViewPort
enableTabScroll:true,
layout:"border",
items:[{title:"面板",
region:"north", //顶部面板
height:50,
html:'<h1>网站后台管理系统</h1>'
},
{
title:"菜单",
region:"west", //左边菜单项,有按钮可控制伸缩的
width:200,
collapsible:true,
html:"菜单栏"
},
{
xtype:"tabpanel", //选项卡
region:"center",
items:[{title:"面板1",html:'<h1>面板1内容</h1>'},
{title:"面板2",html:'<h1>面板2内容</h1>'},
{title:"面板3",html:'<h1>面板3内容</h1>'}]
}
]
});
});

转载于:https://blog.51cto.com/rhyme/81635
本文介绍了一个使用ExtJS框架实现的网站后台管理系统示例,包括Viewport布局、Tab Panel选项卡、可折叠的侧边菜单等组件的配置与使用方法。
2358

被折叠的 条评论
为什么被折叠?



