Ext 布局

1、card layout.

//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()
});

2. vbox layout:

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
    }]
});

转自：

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

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









--