布局 基础
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:"hello",
title:"容器组件",
width:300,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true
},
items:[
{title:"子元素1",html:"这是子元素1中的内容"},
{title:"子元素2",html:"这是子元素2中的内容"},
{title:"子元素3",html:"这是子元素3中的内容"}
],
buttons:[{text:"切换",handler:changeTab}]
});
var i=1;
function changeTab(){
panel.getLayout().setActiveItem(i++);
if(i>2)i=0;
}
});
--------------------------------------------------------------------------------
Ext.onReady(function(){
var b = new Ext.Button({
id:"show-btn", //定义按钮的ID
text:"弹出按钮", //定义按钮的标题
renderTo:document.body//将弹出按钮渲染到窗体上
});
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs = new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0, //当前选项卡是第1个(从0开始)
defaults: {
autoScroll: true
},
items: [{
title: 'Bogus Tab',
html: "第一个Tab的内容."
}, {
title: 'Another Tab',
html: "我是另一个Tab"
}, {
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true //显示关闭按钮
}]
});
//定义一个Panel
var nav = new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true, //设置为分割
width: 200,
collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});
//如果窗口第一次被打开时才创建
if (!win) {
win = new Ext.Window({
title: 'Layout Window',
closable: true, //显示关闭按钮
width: 600,
height: 350,
border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});
}
win.show(button);
});
});
});