Ext FormPanel布局 (一行显示两对控件元素)

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

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

sss

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%后即换行

posted @ 2008-07-21 14:09  Winner.Net(2007)  阅读(11945)  评论(2编辑  收藏  举报