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 belowvar 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 belowExt.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'}]});    }});

?

?

?

?

?