表单的水平布局

表单的默认布局是使用自上而下的布局(即竖直布局)，即是将各个子组件按照配置的先后顺序从上向下摆放。可以在表单的items配置项中定义layout：‘hbox’，定义子组件的布局为水平方向，这就实现了子组件的水平排列。hbox表示水平布局，vbox表示竖直布局。代码如下：

Ext.get(document.body).update("<div />");
        Ext.create('Ext.form.Panel', {
            title: '表单列布局方式',
            frame: true,
            renderTo: Ext.getBody(),
            //width: 700,
          autoWidth:true,
            autoHeight: true,
            
            items: [
                {
                    layout: 'hbox', items: [
                    {
                        columnWidth: 40,
                        layout: 'vbox',
                        defaultType: 'textfield',
                        items: [
                            { fieldLabel: '输入框1' },
                        { fieldLabel: '输入框2' },
                        { fieldLabel: '输入框3' }
                        ]
                    },
                {
                    columnWidth: 40,
                    layout: 'vbox',
                    defaultType: 'textfield',
                    items: [
                    { fieldLabel: '阿里巴巴' },
                    { fieldLabel: '百度' },
                    { fieldLabel: '腾讯' },
                    { fieldLabel: '360' }








                    ]
                },
                {
                    columnWidth: 40,
                    layout: 'vbox',
                  defaultType:'textfield',
                    items: [
                    { fieldLabel: '创新工场' },
                    { fieldLabel: '知乎' },
                    { fieldLabel: '豌豆荚' }


                    ]


                }


                    ]
                }
                    ]


        });