Extjs4.2布局——layout: accordion(Ext.layout.container.Accordion)

本文详细介绍了AccordionLayout在Ext JS中的应用,包括配置、属性及实例化过程,并展示了其在网页布局上的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

API这样介绍这种布局:

示例:(来自API)注:打开默认展开第一个面板。

Ext.create('Ext.panel.Panel', {
                title: 'Accordion Layout',
                width: 300,
                height: 300,
                defaults: {
                    // applied to each contained panel
                    bodyStyle: 'padding:15px'
                },
                layout: {
                    // layout-specific configs go here
                    type: 'accordion',
                    titleCollapse: false,//'true' 表示允许通过点击标题栏的任意位置来展开/收缩子项Panel, 'false' 则表示仅允许通过点击工具按钮来进行展开/收缩.
                    animate: true,//表示对所含面板进行展开/收缩时, 面板的打开/关闭使用动画效果.
                    activeOnTop: true//'true'表示当每个面板展开时, 都将面板移动到容器的第一个. 'false' 则保持顺序不变.
                },
                items: [{
                    title: 'Panel 1',
                    html: 'Panel content!'
                },{
                    title: 'Panel 2',
                    html: 'Panel content!'
                },{
                    title: 'Panel 3',
                    html: 'Panel content!'
                }],
                renderTo: Ext.getBody()
            });

效果:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值