一、面板
1.类结构
Ext.Base
Ext.AbstractComponent
Ext.Component
Ext.container.AbstractContainer
Ext.container.Container
Ext.panel.AbstractPanel
Ext.panel.Panel 是以前版本 现在:Ext.Panel类
2.常见的子类
Ext.window.Window --控制窗口
Ext.form.Panel --控制form
Ext.panel.Table --控制grid
Ext.tab.Panel ---控制工具条
Ext.menu.Menu ---控制菜单
Ext.tip.Tip
Ext.container.ButtonGroup
3.组成面板的组件
底部工具栏、顶部工具栏、面板头部、面板底部、面板体
4.代码实现:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.panel.Panel",{
title:"面板的头部[Ext.panel.Header]",
width:500,
bodyPadding:10,//面板内容的内边距
height:400,
hideCollapseTool:false,//默认是收起还是不收起
collapsible:true,//启用收起的按钮
//animCollapse:false,//是否启动动画
frame:true,//渲染面板
//autoLoad:"",//只要不是null就自动加载内容 html文件的地址
html:"<p>面板体</p>",//和上面的autoLoad冲突,autoLoad优先级要高
autoScroll:true,//自动滚动条
closable:true,//运行客户关闭
closeAction:"destroy",//设置关闭动作是销毁还是隐藏 destroy hide
bodyStyle:{
background:"#ffc"
},
renderTo:"demo",
tbar:[
{xtype:"button",text:"顶部工具栏"}
],
bbar:[
{xtype:"button",text:"底部工具栏"}
],
dockedItems:[{
xtype:"toolbar",
dock:"bottom",//放置位置
ui:"footer",//按钮位置
items:[
{xtype:"component",flex:1},
{xytpe:"button",text:"面板底部",
handler:function(b){
b.up("panel").removeAll();//自动销毁子面板
}
}
]
}],
tools:[{
type:"refresh",
qtip:"刷新"
},{
type:"help",
qtip:"帮助"
},{
type:"next",
handler:function(event,toolEl,panel){
panel.up("panel").insert(0,{//追加一个子panel
xtype:"panel",
width:100,
height:100,
bodyStyle:{
background:"red"
}
})
}
}
]
})
});
二、布局
1.Auto自动布局[Ext.layout.container.Auto]
介绍:组件没有指定任何布局方式,Auto布局就是默认的布局方式,它采用原始的HTML流式排版的布局方式
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.Panel",{
width:500,
height:480,
title:"auto布局的面板",
layout:"auto",
renderTo:"demo",
items:[{
xtype:"panel",
title:"第一个面板",
width:"75%",//占总体的百分比
height:90
},{
xtype:"panel",
title:"第二个面板",
width:"75%",
height:90
},{
xtype:"panel",
title:"第三个面板",
width:"90%",
height:90
}]
})
})
2.Fit自适应布局[Ext.layout.container.Fit]
介绍:它是它的(第一个也是唯一个)资源元素填满自身的body
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.Panel",{
width:500,
height:280,
title:"fit布局的面板",
layout:"fit",
renderTo:"demo",
items:[{
xtype:"panel",
title:"第一个面板",
width:"75%",//占总体的百分比
height:90
},{
xtype:"panel",
title:"第二个面板",
width:"75%",
height:90
}]
})
})
3.Accordion折叠(手风琴)布局 [Ext.layout.container.Accordion]
介绍:它是初始化多个版面,当一个版面处于打开状态下,其他办法就会处于收起状态
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create("Ext.Panel",{
width:500,
height:280,
title:"accordion布局的面板",
layout:"accordion",
renderTo:"demo",
items:[{
xtype:"panel",
title:"第一个面板",
width:"75%",//占总体的百分比
height:90
},{
xtype:"panel",
title:"第二个面板",
width:"75%",
height:90
},{
xtype:"panel",
title:"第三个面板",
width:"90%",
height:90
}]
})
})
4.Card卡片布局[Ext.layout.container.Card]
介绍:和折叠布局不同之处在于它是自定义按钮来切换
Ext.onReady(function(){
Ext.QuickTips.init();
varnavigate=function(panel,direction,btn){
varlayout=panel.getLayout();
layout[direction]();//指定动态的方法 根据传入的参数来充当方法名
//card的关键函数next()Ext.Component.prev():Ext.Component
//getNext()Ext.Component.next() : Ext.Component
Ext.getCmp("move-prev").setDisabled(!layout.getPrev());
Ext.getCmp("move-next").setDisabled(!layout.getNext());
}
Ext.create("Ext.Panel",{
width:500,
height:280,
layout:"card",//设置布局
activeItem:0,//默认展示的子节点索引
index:1,//自定义索引
renderTo:"demo",
items:[{
id:"card-0",
xtype:"panel",
title:"第一个面板",
html:"第一个面板"
},{
id:"card-1",
xtype:"panel",
title:"第二个面板",
html:"第二个面板"
},{
id:"card-2",
xtype:"panel",
title:"第三个面板",
html:"第三个面板"
}],
titleInfo:"card布局实例",
listeners:{
render:function(){//面板初始化调用
varpanel=this;
panel.setTitle(panel.titleInfo+"("+(this.activeItem+1)+"/"+panel.items.length+")");
}
},
bbar:[{
id:"move-prev",
text:"上一页",
handler:function(btn){
varpanel=btn.up("panel");
panel.index=panel.index-1;
panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");
navigate(panel,"prev");
},
disabled:true
},
"->"//标识,将下一页这个按钮放到最右部
,{
id:"move-next",
text:"下一页",
handler:function(btn){
varpanel=btn.up("panel");
panel.index=panel.index+1;
panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");
navigate(panel,"next");
}
}]
})
})