横向布局
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' } ] }); } });