脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Extjs4中layout的使用一,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 2.1Auto自动布局[Ext.layout.container.Auto]
组件没有指定任何布局方式的时候Auto布局就是默认的布局方式,他采用最原始的HTML流式排版的布局方式
[htML]
Ext.onReady(function(){
Ext.QuickTips.inIT();
Ext.create('Ext.Panel', {
width: 800,
height: 280,
title: "AutoLayout布局的面板",
layout: 'auto',//设置布局,默认为流式布局
renderTo: 'demo',
items: [{
xtyPE: 'panel',
title: '第一个面板',
width: '75%', //站总体宽度的75%
height: 90
},{
xtype: 'panel',
title: '第二个面板',
width: '75%',
height: 90
},{
xtype: 'panel',
title: '第三个面板',
width: '99%',
height: 90
}]
});
})
2.2Fit自适应布局[Ext.layout.container.Fit]
他是他的(第一个也是唯一个)子元素填满自身的body
[html]
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.Panel', {
width: 500,
height: 280,
title: "AutoLayout布局的面板",
layout: 'fit',//设置布局,充满面板
renderTo: 'demo',
items: [{
xtype: 'panel',
title: '第一个面板'
},{
xtype: 'panel',
title: '第二个面板'
}]
});
})
2.3Accordion折叠(手风琴)布局[Ext.layout.container.Accordion]
他是初始化多个版面,当一个版面处于打开状态下,其他版面就会处于收起状态
[html]
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel', {
title: 'Accordion布局',
width: 300,
height: 300,
layout:'accordion',//折叠式
defaults: {
bodyStyle: 'padding:15px'
},
layoutconfig: {
titleCollapse: false,
aniMATE: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '面板1'
},{
title: 'Panel 2',
html: '面板2'
},{
title: 'Panel 3',
html: '面板3'
}],
renderTo: 'demo'
});
});
2.4Card卡片布局[Ext.layout.container.Card]
和折叠布局不同之处在于他是自定义按钮来切换
[html]
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel', {
title: 'Accordion布局',
width: 300,
height: 300,
layout:'accordion',//折叠式
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: true,
activeOnTop: true
},
items: [{
title: 'Panel 1',
html: '面板1'
},{
title: 'Panel 2',
html: '面板2'
},{
title: 'Panel 3',
html: '面板3'
}],
renderTo: 'demo'
});
});
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-Extjs4中layout的使用一全部内容,希望文章能够帮你解决javascript代码实例教程-Extjs4中layout的使用一所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。