sencha > layout (布局)

横向布局

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

 

纵向布局

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

 

** 卡片布局

 

Ext.application({
    name: 'MyApp',
	launch: function(){   
		//this is the Panel we'll be adding below
			var panel = Ext.create('Ext.Panel', {
				layout: 'card',
				items: [
					{
						html: "First Item"
					},
					{
						html: "Second Item"
					},
					{
						html: "Third Item"
					},
					{
						html: "Fourth Item"
					}
				]
			});

			panel.setActiveItem(0);	
			Ext.Viewport.add(panel);

	}
});

 

** 自适应布局, 子组件会 适应父组件的长宽

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'panel',
        html: 'Also 200px by 200px'
    }
});

Ext.Viewport.add(panel);

 

** docked  (漂浮)

Ext.application({
    name: 'MyApp',
	launch: function(){   
		//this is the Panel we'll be adding below
		Ext.create('Ext.Container', {
			fullscreen: true,
			layout: 'hbox',
			items: [
				{
					docked: 'top',
					xtype: 'panel',
					height: 20,
					html: 'This is docked to the top'
				},
				{
					xtype: 'panel',
					html: 'message list',
					flex: 1
				},
				{
					xtype: 'panel',
					html: 'message preview',
					flex: 2
				}
			]
		});



	}
});

 

 ** 轮播 布局

Ext.application({
    name: 'Sencha',
    launch: function() {
		Ext.create('Ext.Carousel', {
			fullscreen: true,

			defaults: {
				styleHtmlContent: true
			},

			items: [
				{
					html : 'Item 1',
					style: 'background-color: #5E99CC'
				},
				{
					html : 'Item 2',
					style: 'background-color: #759E60'
				},
				{
					html : 'Item 3'
				}
			]
		});
    }
});