javascript代码实例教程-Extjs4中layout的使用一

发布时间:2019-02-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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,请注明来意。