Ext 布局

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

iteye_3352

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

阅读量97

点赞数

分类专栏： ext 文章标签： ext layout card vbox

本文链接：https://blog.csdn.net/iteye_3352/article/details/82582028

版权

ext 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

[b][size=large]1、card layout.[/size][/b]


//a util function.
var navigate = function (panel, direction) {
    var layout = panel.getLayout();
    layout[direction]();
    Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
    Ext.getCmp('move-next').setDisabled(!layout.getNext());
}; 

// card layout
Ext.create('Ext.panel.Panel', {
    title: 'Example Wizard',
    width: 300,
    height: 200,
    layout: 'card',
    bodyStyle: 'padding:15px',
    defaults: {
        border: false
    },
    bbar: [{
            id: 'move-prev',
            text: 'Back',
            handler: function (btn) {
                navigate(btn.up("panel"), "prev");
            },
            disabled: true
        },
        '->',
        {
            id: 'move-next',
            text: 'Next',
            handler: function (btn) {
                navigate(btn.up("panel"), "next");
            }
        }
    ],
    items: [{
        id: 'card-0',
        html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
    }, {
        id: 'card-1',
        html: '<p>Step 2 of 3</p>'
    }, {
        id: 'card-2',
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
    }],
    renderTo: Ext.getBody()
});

[img]http://dl2.iteye.com/upload/attachment/0097/9390/c56d266d-6d8e-38b2-973c-b421dd3aff05.png[/img]

[b][size=large]2. vbox layout:[/size][/b]


Ext.create('Ext.Panel', {
    width: 500,
    height: 400,
    title: "VBoxLayout Panel",
    layout: {
        type: 'vbox',
        align: 'center'
    },
    renderTo: document.body,
    items: [{
            xtype: 'panel',
            title: 'Inner Panel One',
            width: 250,
            flex: 2
        },
        {
            xtype: 'panel',
            title: 'Inner Panel Two',
            width: 250,
            flex: 7
        },
        {
            xtype: 'panel',
            title: 'Inner Panel Three',
            width: '100%',
            flex: 1
    }]
});

[img]http://dl2.iteye.com/upload/attachment/0097/9392/8d2434e1-11ff-3d52-85e0-d7f01e62d079.png[/img]

转自：

http://www.cnblogs.com/sunjinpeng/archive/2011/12/16/2289833.html

查看更多（访问可能需要番羽墙软件）：
http://nodebook.info/book/view?bid=539524d78a13c8206fbe9449

--