extjs布局

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        layout: "border",
        items: [{
                region: "west",
                title: ‘west‘,
                width:100
            }, {
                region: "east",
                title: ‘east‘,
                width:100
            }, {
                region: "north",
                title: ‘north‘
            }, {
                region: "center",
                title: ‘center‘
            }, {
                region: "south",
                title: "south"
            }
        ]
    });
});

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
        width: 400,
        height: 400,
        renderTo: Ext.getBody(),
        layout: "accordion",
        items: [{
            title: "a",
            html: "a"
        }, {
            title: "b",
            html: "b"
        }, {
            title: "c",
            html: "c"
        }]
    });
});

Ext.onReady(function() {
    var card = Ext.create(‘Ext.container.Container‘, {
        width: 400,
        height: 400,
        layout: "card",
        items: [{
            html: ‘<h1>第一步</h1>‘
        }, {
            html: ‘<h1>第二步</h1>‘
        }, {
            html: ‘<h1>最后一步</h1>‘
        }]
    });
    var button = Ext.create(‘Ext.container.Container‘, {
        width: 400,
        height: 400,
        items: [{
            html: ‘<h1>上一步</h1>‘,
            listeners: {
                click: {
                    element: ‘el‘,
                    fn: function() {
                        card.getLayout()[‘prev‘]();
                    }
                }
            }
        }, {
            html: ‘<h1>下一步<h1>‘,
            listeners: {
                click: {
                    element: ‘el‘,
                    fn: function() {
                        card.getLayout()[‘next‘]();
                    }
                }
            }
        }]
    });

    Ext.create(‘Ext.container.Container‘, {
        renderTo: Ext.getBody(),
        items: [card, button]
    })
});

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
         width:111,
         layout: "fit",
         items: [{
             width:100,
             height:100,
             html: ‘<h1>第一步</h1>‘
         }, {
             html: ‘<h1>第二步</h1>‘
         }, {
             html: ‘<h1>最后一步</h1>‘
         }],
          renderTo: Ext.getBody(),
     });
});

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
        layout: ‘anchor‘,
        items: [{
            html: ‘<h1>第一步</h1>‘,
            anchor: ‘50% 50%‘
        }, {
            html: ‘<h1>第二步</h1>‘,
            anchor: ‘75% 75%‘
        }, {
            html: ‘<h1>最后一步</h1>‘
        }],
        renderTo: Ext.getBody(),
    });
});

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
        layout: ‘absolute‘,
        items: [{
             x: 10,
        y: 10,
            html: ‘<h1>第一步</h1>‘
        }, {
             x: 20,
        y: 20,
            html: ‘<h1>第二步</h1>‘
        }, {
             x: 30,
        y: 30,
            html: ‘<h1>最后一步</h1>‘
        }],
        renderTo: Ext.getBody(),
    });
});

Ext.onReady(function() {
    Ext.create(‘Ext.container.Container‘, {
        layout: ‘column‘,
        items: [{
        columnWidth: .33,
            html: ‘<h1>第一步</h1>‘
        }, {
        columnWidth: .33,
            html: ‘<h1>第二步</h1>‘
        }, {
        columnWidth: .33,
            html: ‘<h1>最后一步</h1>‘
        }],
        renderTo: Ext.getBody(),
    });
});