Ext布局

最新推荐文章于 2021-07-01 02:58:41 发布

转载最新推荐文章于 2021-07-01 02:58:41 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/final-elysion/p/6113467.html

本文详细介绍了Ext框架中的多种布局方式，包括vbox/hbox布局、tab面板布局、Accordion手风琴布局、border边界布局、card卡片布局及Fit填满布局等，并提供了具体的实现代码示例。

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

Ext布局

vbox && hbox(垂直拉伸布局 && 水平拉伸布局)

    Ext.create('Ext.Container', {
        layout:{
            type:'vbox',
            align :'stretch'
        },
        items: [{
            html: 'Awesome banner',
            style: 'background-color: #759E60;',
            flex: 1
        },
        {
            html: 'Some wonderful information',
            style: 'background-color: #5E99CC;',
            flex: 2
        }]
    });

tab

    Ext.define('MySecurity.view.main.MainTabPanel', {
        extend: 'Ext.tab.Panel',
        requires:[
            'MySecurity.view.home.HomePanel',
            'MySecurity.view.user.UserPanel',
            'MySecurity.view.resource.ResourcePanel',
            'MySecurity.view.role.RolePanel'
        ],
        xtype: 'mainTabPanel',
        layout:'fit',
        //tab的位置
        tabPosition: 'left',
        //文字旋转
        tabRotation: 0,
        items: [{
            title: '主页',
            iconCls:'x-fa fa-home',
            iconAlign:'top', 
            itemId: 'homePanel',
            xtype:'homePanel'
        },{
            title: '用户',
            iconCls:'x-fa  fa-user',
            iconAlign:'top', 
            itemId: 'user',
            xtype:'userPanel'
        },{
            title: '角色',
            iconCls:'x-fa  fa-users',
            iconAlign:'top', 
            itemId: 'role',
            xtype:'rolePanel'
        },{
            title: '资源',
            padding:'0 5',
            iconCls:'x-fa  fa-link',
            iconAlign:'top', 
            itemId: 'resource',
            xtype:'resourcePanel'
        }]
    });

Accordion(手风琴布局)

    Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 300,
        defaults: {
            bodyStyle: 'padding:15px'
        },
        layout: {
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content!'
        },{
            title: 'Panel 2',
            html: 'Panel content!'
        },{
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: Ext.getBody()
    });

border(边界布局)

    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        title: 'Border Layout',
        layout: 'border',
        items: [{
            title: 'South Region is resizable',
            region: 'south',     // position for region
            xtype: 'panel',
            height: 100,
            split: true,         // enable resizing
            margin: '0 5 5 5'
        },{
            // xtype: 'panel' implied by default
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margin: '5 0 0 5',
            width: 200,
            collapsible: true,   // make collapsible
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',     // center region is required, no width/height specified
            xtype: 'panel',
            layout: 'fit',
            margin: '5 5 0 0'
        }],
        renderTo: Ext.getBody()
    });

card (卡片布局)

    var p = Ext.create('Ext.panel.Panel', {
        layout: 'card',
        items: [
            { html: 'Card 1' },
            { html: 'Card 2' }
        ],
        renderTo: Ext.getBody()
    });

    p.getLayout().setActiveItem(1);

Fit(填满)

    Ext.create('Ext.panel.Panel', {
        title: 'Fit Layout',
        width: 300,
        height: 150,
        layout:'fit',
        items: {
            title: 'Inner Panel',
            html: 'This is the inner panel content',
            bodyPadding: 20,
            border: false
        },
        renderTo: Ext.getBody()
    });

转载于:https://www.cnblogs.com/final-elysion/p/6113467.html