九宫格布局练习

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