sencha > layout (布局)

最新推荐文章于 2017-11-16 17:30:00 发布

原创最新推荐文章于 2017-11-16 17:30:00 发布 · 191 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Sencha Tcouch

本文详细介绍了ExtJS中各种布局的应用实例，包括横向(hbox)、纵向(vbox)、卡片(card)、自适应(fit)、漂浮(docked)及轮播(carousel)布局。通过这些布局，可以创建灵活且响应式的用户界面。

横向布局

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