当前位置: 代码迷 >> Web前端 >> 九宫格格局练习
  详细解决方案

九宫格格局练习

热度:163   发布时间:2012-09-02 21:00:34.0
九宫格布局练习


Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
	defaults: {
                flex: 1,
                width: '100%',
                padding: 10,
                defaults: {
                    flex: 1,
                    height: '100%',
                    margin: 10
                }    
            },
    items: [
        {
                xtype: 'panel',
                layout: 'hbox',
                items:[
                    {xtype:'button',text:'按钮1'},
                    {xtype:'button',text:'按钮2'},
					{xtype:'button',text:'按钮3'},
                    
                ],
				  flex: 1
        },
        {
            xtype: 'panel',
                layout: 'hbox',
                items:[
                    {xtype:'button',text:'按钮1'},
                    {xtype:'button',text:'按钮2'},
					{xtype:'button',text:'按钮3'},
                   
                ],
				  flex: 1
        },
		 {
           xtype: 'panel',
                layout: 'hbox',
                items:[
                    {xtype:'button',text:'按钮1'},
                    {xtype:'button',text:'按钮2'},
					{xtype:'button',text:'按钮3'},
                   
                ],
				  flex: 1
        },
		 {
            xtype: 'panel',
                layout: 'hbox',
                items:[
                    {xtype:'button',text:'按钮1'},
                    {xtype:'button',text:'按钮2'},
					{xtype:'button',text:'按钮3'},
                   
                ],
				  flex: 1
        }
    ]
});
  相关解决方案