Ext FormPanel布局 (一行显示两对控件元素)
在作布局的时候,常常会出现这类情况,在HTML中可以利用表格来布局,那么Ext2呢?
我自己也琢磨了不少时间,今天终于有了收获:

 var simpleForm = new Ext.FormPanel({
var simpleForm = new Ext.FormPanel({ labelAlign: 'left',
    labelAlign: 'left', title: '表单例子',
    title: '表单例子', buttonAlign:'right',
    buttonAlign:'right', bodyStyle:'padding:5px',
    bodyStyle:'padding:5px', width: 600,
    width: 600, frame:true,
    frame:true, labelWidth:80,
    labelWidth:80, items: [{
    items: [{ layout:'column',   //定义该元素为布局为列布局方式
        layout:'column',   //定义该元素为布局为列布局方式 border:false,
        border:false, labelSeparator:':',
        labelSeparator:':', items:[{
        items:[{ columnWidth:.5,  //该列占用的宽度,标识为50%
            columnWidth:.5,  //该列占用的宽度,标识为50% layout: 'form',
            layout: 'form', border:false,
            border:false, items: [{                     //这里可以为多个Item,表现出来是该列的多行
            items: [{                     //这里可以为多个Item,表现出来是该列的多行 cls : 'key',
                cls : 'key', xtype:'textfield',
                xtype:'textfield', fieldLabel: '用户名',
                fieldLabel: '用户名', name: 'name',
                name: 'name', anchor:'90%'
                anchor:'90%' }]
            }] },{
        },{ columnWidth:.5,
            columnWidth:.5, layout: 'form',
            layout: 'form', border:false,
            border:false, items: [{
            items: [{ cls : 'key',
                cls : 'key', xtype:'textfield',
                xtype:'textfield', inputType:'password',
                inputType:'password', fieldLabel: '口令',
                fieldLabel: '口令', name: 'passwd',
                name: 'passwd', anchor:'90%'
                anchor:'90%' }]
            }] }]
        }] }]
    }] })
})如果每个列元素中的Items都为一行,则可以通过控制每列显示的宽度来换行,没换所有的列元素的宽度和达到100%后即换行
 
                    
                     
                    
                 
                    
                
 

 items: [
    items: [ 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号