学步园

在作布局的时候，常常会出现这类情况，在HTML中可以利用表格来布局，那么Ext2呢？

我自己也琢磨了不少时间，今天终于有了收获：

var simpleForm = new Ext.FormPanel(...{
    labelAlign: 'left',
    title: '表单例子',
    buttonAlign:'right',
    bodyStyle:'padding:5px',
    width: 600,
    frame:true,
    labelWidth:80,
    items: [...{
        layout:'column',   //定义该元素为布局为列布局方式
        border:false,
        labelSeparator:'：',
        items:[...{
            columnWidth:.5,  //该列占用的宽度，标识为50％
            layout: 'form',
            border:false,
            items: [...{                     //这里可以为多个Item，表现出来是该列的多行
                cls : 'key',
                xtype:'textfield',
                fieldLabel: '用户名',
                name: 'name',
                anchor:'90%'
            }]
        },...{
            columnWidth:.5,
            layout: 'form',
            border:false,
            items: [...{
                cls : 'key',
                xtype:'textfield',
                inputType:'password',
                fieldLabel: '口令',
                name: 'passwd',
                anchor:'90%'
            }]
        }]
    }]
})

 如果每个列元素中的Items都为一行，则可以通过控制每列显示的宽度来换行，没换所有的列元素的宽度和达到100%后即换行